大家都知道，移动端当有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 保存滚动条位置关闭的时候还原滚动位置
这样上面3个缺点都解决了，至此滚动穿透就完美解决了.
原文发布时间为：2017-2-23
本文作者：admin
本文来自云栖社区合作伙伴“蚂蚁部落”，了解相关信息可以关注蚂蚁部落
原文链接：如何解决移动端滚动穿透问题
