既然我们要阻止页面滚动,那么何不将其固定在视窗(即position: fixed),这样它就无法滚动了,当蒙层关闭时再释放body的样式position:fixed。

position: fixed应该不用对大家过多介绍了吧,详细的介绍大家可以参考这篇文章:http://www.jb51.net/article/83175.htm

当然还有一些细节要考虑,将页面固定视窗后,内容会回头最顶端,这里我们需要记录一下,同步top值。

示例代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
let bodyEl = document.body
let top = 0
 
function stopBodyScroll (isFixed) {
 if (isFixed) {
 top = window.scrollY
 
 bodyEl.style.position = 'fixed'
 bodyEl.style.top = -top + 'px'
 } else {
 bodyEl.style.position = ''
 bodyEl.style.top = ''
 
 window.scrollTo(0, top) // 回到原先的top
 }
}

相关文章:

  • 2022-01-01
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-02-22
  • 2021-11-15
猜你喜欢
  • 2021-06-06
  • 2022-12-23
  • 2021-12-10
  • 2022-12-23
  • 2021-12-16
  • 2021-08-04
相关资源
相似解决方案