如何解决移动端滚动穿透问题

简介:
大家都知道,移动端当有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

本文来自云栖社区合作伙伴“蚂蚁部落”,了解相关信息可以关注蚂蚁部落

原文链接:如何解决移动端滚动穿透问题

相关文章
移动端点击事件:原理、问题与解决方案
前端技术在移动端点击事件上的应用,涉及触屏交互、响应速度优化及用户体验提升,确保网页或应用在手机等移动设备上流畅运行。
移动端滚动分页解决方案
移动端滚动分页解决方案
111 4
蓝条下压和消失导致页面错乱问题解决方案
蓝条下压和消失导致页面错乱问题解决方案
72 0
|
10月前
|
前端改原生组件遇到的一个神奇的现象
前端改原生组件遇到的一个神奇的现象
91 0
fastclick解决移动端click事件延迟300ms和点击穿透
在开发webApp和移动端的时候,常常遇到移动端点击响应慢的问题,因此查找各方资料,整理解决方案加以记录
312 0
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等