Skip to content

Latest commit

 

History

History
52 lines (35 loc) · 2.21 KB

README.md

File metadata and controls

52 lines (35 loc) · 2.21 KB

滚动穿透问题

当有 fixed 遮罩背景和弹出层时,在屏幕上滑动能够滑动背景下面的内容

解决方案

在遮罩层出现时,将body定位设置为position: fixed; width: 100%; , 遮罩层消失则恢复正常。但是还有个问题,这样关闭弹出层后,body移位了,还需要恢复其滚动位置。

移动端和PC端的滚动容器不同,移动端是 document.body, PC端是document.documentElement, 而现在通过document.scrollingElement可以识别到具体的滚动容器,方便移动端和PC端代码统一。

body.ban-scroll { // 禁止滚动
  position: fixed;
  width: 100%;
}
// 用于存储滚动高度的中间变量
let MaskHelperScrollTop

// 禁止滚动穿透
// 此处flag仅用于表示是否需要禁止滚动,根据实际调整即可
if (flag) {
  MaskHelperScrollTop = document.scrollingElement.scrollTop
  document.body.classList.add('ban-scroll')
} else {
  document.body.classList.remove('ban-scroll')
  document.scrollingElement.scrollTop = MaskHelperScrollTop
}

相关链接