移动端滚动穿透问题完美解决方案
2016-06-02 07:11
615 查看
问题
众所周知,移动端当有 fixed 遮罩背景和弹出层时,在屏幕上滑动能够滑动背景下面的内容,这就是著名的滚动穿透问题之前搜索了一圈,找到下面两种方案
css 之 overflow: hidden
.modal-open { &, body { overflow: hidden; height: 100%; } }
页面弹出层上将
.modal-open添加到 html 上,禁用 html 和 body 的滚动条
但是这个方案有两个缺点:
由于 html 和 body的滚动条都被禁用,弹出层后页面的滚动位置会丢失,需要用 js 来还原
页面的背景还是能够有滚的动的效果
js 之 touchmove + preventDefault
modal.addEventListener('touchmove', function(e) { e.preventDefault(); }, false);
这样用 js 阻止滚动后看起来效果不错了,但是也有一个缺点:
弹出层里不能有其它需要滚动的内容(如大段文字需要固定高度,显示滚动条也会被阻止)
上面两个方案都有缺点,今天用英文关键字 google 了一下,才发现原来还有更好的方案
解决方案 position: fixed
body.modal-open { position: fixed; width: 100%; }
如果只是上面的 css,滚动条的位置同样会丢失
所以如果需要保持滚动条的位置需要用 js 保存滚动条位置关闭的时候还原滚动位置
这样上面3个缺点都解决了,至此滚动穿透就完美解决了
完整的示例
参考
https://github.com/twbs/bootstrap/issues/15852https://github.com/mathiasbynens/document.scrollingElement
https://segmentfault.com/q/1010000002942948
相关文章推荐
- android 6.0 Intent 安装apk闪退
- 1-2Xamarin-浅淡HelloWorld
- Android Studio代码调试技巧篇
- 微信JSSDK上传多张图片
- 在导入新库的时候,一定先看下已有的依赖!
- Android_自定义View拖拽重绘
- Android_三种形式Dialog
- Android_自定义底部动画弹出pupopwindow
- Android 百度地图学习笔记1
- Unity 官方案例 Survival Shooter 复刻版
- Android_双指缩放TextView
- 电话录音
- unity 将 .prefab 转换为 txt 格式
- Android_日期选择器DatePickerDialog、时间选择器TimePickerDialog
- Android消息机制
- Android5.0 v7 库中actionbar中既显示文字又显示图标
- Clipping Views安卓裁剪工具的使用,使用Android5.0新技术绘制圆角矩形,圆形控件。
- Android UncaughtExceptionHandler 记录异常并重启程序
- android 打开各种文件(setDataAndType)
- 一步一步实现iOS微信自动抢红包(非越狱)