问题描述
最近在做移动项目时遇到一个页面滚动穿透问题，具体场景是这样的，在一个可滚动的列表页中打开弹窗，底部的页面理论上是不可滚动的，但是当滑动弹窗时，底部页面会跟随滚动，这就是所谓的页面滚动穿透的问题。这个是比较常见的问题，基本都会遇到，Google一下出解决方案也是挺多的。以下根据不同的适用场景总结一些解决方案：
方案一：overflow:hidden
在列表容器的父元素上设置样式overflow:hidden来禁用滚动
复制代码
1
2
3
4
5
6
7
8.alpha { height: 100%; overflow: hidden; } .alpha body { height: 100%; overflow: hidden; }
当弹出蒙层的时候，可以添加底部页面HTML标签的class，取消蒙层时则删除class
复制代码
1
2$('html').addClass('alpha'); $('html').removeClass('alpha');
缺点：
当弹出蒙层时，禁用了html和body的滚动条，滚动列表的滚动位置会丢失，会重置到没有滚动的状态，需要js进行还原。
手机扫码查看效果：
查看DEMO
1、未滚动时弹出蒙层，底部列表会被禁用滚动
2、滚动后再弹出蒙层，滚动位置会丢失，重置到无滚动的位置
方案二：阻止touchmove默认事件
通过阻止弹窗的touchmove默认事件禁用滚动实现
代码实现：
复制代码
1
2
3
4var modal = document.getElementById('modal'); // 弹窗dom对象 modal.addEventListener('touchmove', function(e) { e.preventDefault(); }, false);
缺点
弹窗中里不能有其它需要滚动的内容，如大段文字需要固定高度，显示滚动条也会被阻止。
方案三：position: fixed
设置列表容器元素为positon:fixed
代码实现:
复制代码
1
2
3
4.alpha.body{ position:fixed; width:100%; }
缺点：
这种方法同样有以上两种方法的缺点，滚动列表的滚动位置会丢失，会重置到没有滚动的状态，通过js获取滚动条位置，调整位置即可。
打开弹窗时则在body元素上添加class
最后
以上就是懦弱香水最近收集整理的关于移动端页面滚动穿透问题解决方案的全部内容，更多相关移动端页面滚动穿透问题解决方案内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复