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

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

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

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

目录
打赏
0
0
0
0
14291
分享
相关文章
Qt实用技巧:实现不规则窗口的鼠标消息穿透,包括穿透到桌面和穿透到父窗口
Qt实用技巧:实现不规则窗口的鼠标消息穿透,包括穿透到桌面和穿透到父窗口
频繁解锁太麻烦?支付宝实现锁屏组件新能力
频繁解锁太麻烦?支付宝实现锁屏组件新能力
技术心得记录:微信小程序之图片频繁变化,几秒之后输出结果(适用于抽奖)
技术心得记录:微信小程序之图片频繁变化,几秒之后输出结果(适用于抽奖)
57 0
|
10月前
|
前端改原生组件遇到的一个神奇的现象
前端改原生组件遇到的一个神奇的现象
94 0
fastclick解决移动端click事件延迟300ms和点击穿透
在开发webApp和移动端的时候,常常遇到移动端点击响应慢的问题,因此查找各方资料,整理解决方案加以记录
316 0
前端页面双向滚动方案
脱离canvas后,页面如何实现上下左右双滑动?又如何在安卓系统和iOS系统上实现?