文章目录
  1. 1. 问题
  2. 2. css 之 overflow: hidden
  3. 3. js 之 touchmove + preventDefault
  4. 4. 解决方案 position: fixed
  5. 5. document.scrollingElement
  6. 6. 参考

本文转自:https://uedsky.com/2016-06/mobile-modal-scroll/

问题

众所周知,移动端当有 fixed 遮罩背景和弹出层时,在屏幕上滑动能够滑动背景下面的内容,这就是臭名昭著的滚动穿透问题。

之前搜索了一圈,找到下面两种方案:

css 之 overflow: hidden

1
2
3
4
5
6
.modal-open {
&, body {
overflow: hidden;
height: 100%;
}
}

页面弹出层上将 .modal-open 添加到 html 上,禁用 html 和 body 的滚动条,但是这个方案有两个缺点:

  1. 由于 html 和 body的滚动条都被禁用,弹出层后页面的滚动位置会丢失,需要用 js 来还原。
  2. 页面的背景还是能够有滚的动的效果

js 之 touchmove + preventDefault

1
2
3
modal.addEventListener('touchmove', function(e) {
e.preventDefault();
}, false);

这样用 js 阻止滚动后看起来效果不错了,但是也有一个缺点:弹出层里不能有其它需要滚动的内容(如大段文字需要固定高度,显示滚动条也会被阻止)。

上面两个方案都有缺点,今天用英文关键字 google 了一下,才发现原来还有更好的方案:

解决方案 position: fixed

1
2
3
4
body.modal-open {
position: fixed;
width: 100%;
}

如果只是上面的 css,滚动条的位置同样会丢失。
所以如果需要保持滚动条的位置需要用 js 保存滚动条位置关闭的时候还原滚动位置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/**
* ModalHelper helpers resolve the modal scrolling issue on mobile devices
* https://github.com/twbs/bootstrap/issues/15852
* requires document.scrollingElement polyfill https://github.com/yangg/scrolling-element
*/
var ModalHelper = (function(bodyCls) {
var scrollTop;
return {
afterOpen: function() {
scrollTop = document.scrollingElement.scrollTop;
document.body.classList.add(bodyCls);
document.body.style.top = -scrollTop + 'px';
},
beforeClose: function() {
document.body.classList.remove(bodyCls);
// scrollTop lost after set position:fixed, restore it back.
document.scrollingElement.scrollTop = scrollTop;
}
};
})('modal-open');

这样上面3个缺点都解决了,至此滚动穿透就完美解决了

完整的示例

document.scrollingElement

因为浏览器获取和设置 scrollTop 存在兼容性,为了简化上面的示例,我直接使用了 document.scrollingElement 这个新标准 ,对于不支持的浏览器我写了个 polyfill document.scrollingElement.js

参考

文章目录
  1. 1. 问题
  2. 2. css 之 overflow: hidden
  3. 3. js 之 touchmove + preventDefault
  4. 4. 解决方案 position: fixed
  5. 5. document.scrollingElement
  6. 6. 参考