关于移动端滚动穿透问题的解决

移动端滚动穿透问题：在移动端进行fixed弹窗的时候，在弹窗上滑动会导致下层页面跟着滚动，影响用户体验，这种现象称为‘滚动穿透’。

三种解决办法中，视需求选择解决办法：

方法一：overflow:hidden;

在列表容器的父容器设置样式overflow:hidden来禁用滚动

html.vox , html.vox body{　　height:100%;　　overflow:hidden;}

当弹出弹窗的时候，为底部页面HTML添加样式，取消弹窗的时候删除样式

这种方式的缺点就是当弹窗弹出的时候，禁用了HTML和body的滚动条，滚动条列表的滚动位置会丢失，重置到没有滚动的状态。需要js重置；（不推荐使用）

方式二：阻止touchmove默认事件

通过阻止touchmove事件禁用滚动事件

var modal = document.getElementById('modal');
modal.addEventListener('touchmove',function(e){e.preventDefault();
},false);

缺点：弹窗里滚动事件也会失效，所以如果弹窗内容不会出现滚动时可以使用

方式三：position：fixed

 var ModalHelper = (function(bodyCls){var scrollTop;return{afterOpen:function(){scrollTop = document.scrollingElement.scrollTop;ndocument.body.classList.add(bodyCls);document.body.style.top = -scrollTop+'px';},beforeClose:function(){document.body.classList.remove(bodyCls); document.scrollingElement.scrollTop = scrollTop;}}})('modal-open');function openModal(){ModalHelper.afterOpen();}function closeModal(){ModalHelper.beforeClose();}

这种方式能够完美避免上两种方法的弊端，推荐使用。

转载于:https://www.cnblogs.com/DreamerLeaf/p/9968069.html

关于移动端滚动穿透问题的解决相关推荐

移动端滚动穿透问题完美解决方案
移动端滚动穿透问题完美解决方案参考文章: (1)移动端滚动穿透问题完美解决方案 (2)https://www.cnblogs.com/yaiza/p/11384130.html 备忘一下.
移动端滚动穿透的6种解决方案
移动端滚动穿透的6种解决方案参考文章: (1)移动端滚动穿透的6种解决方案 (2)https://www.cnblogs.com/bigkuan/p/11977674.html 备忘一下.
移动端滚动穿透与滚动溢出解决方案
滚动穿透滚动穿透.gif 问题描述在移动端 WEB 开发的时候(小程序也雷同),如上录屏所示,如果页面超过一屏高度出现滚动条时,在 fixed 定位的弹窗遮罩层上进行滑动,它下面的内容也会跟着一起 ...
js - 移动端的超出滚动功能，附带滚动条，可解决弹层中滚动穿透问题。
背景: 弹层里边有可滚动区域时,在移动端的坑我就不多说了. 找了很多解决滚动穿透的方案,最终都不能完美解决. 一气之下自己js撸了一个. 效果图: 原理: 1.解决滚动穿透:通过给弹层绑定touchm ...
当uniapp遇上滚动穿透，巧妙的解决方式~
上一次遇上这个滚动穿透,我是暴力解决的,当uniapp遇上可恶的滚动穿透的时候,我是怎么暴力解决的,今天学会了一个巧妙的方式,几行代码,超级方便好用,爱了爱了- 就是利用page-meta标签的pag ...
uniapp 微信小程序和H5的弹窗滚动穿透解决
滚动穿透: 页面里的弹窗也是可以滚动的,然后页面本身内容多所以也是滚动的,就造成,在弹窗滚动的时候,页面内容也跟着滚动了.如图所示 ps: 电脑端分鼠标滚轮滚动和长按鼠标拖拽滚动,手机端只有触屏滑屏滚 ...
解决弹出框滚动穿透的问题（问题是body也会滚动）
解决弹出框滚动穿透的问题(问题是body也会滚动) 参考文章: (1)解决弹出框滚动穿透的问题(问题是body也会滚动) (2)https://www.cnblogs.com/ghfjj/p/8317 ...
移动端页面滚动穿透问题解决方案
移动端页面滚动穿透问题解决方案参考文章: (1)移动端页面滚动穿透问题解决方案 (2)https://www.cnblogs.com/GeniusLyzh/p/5808446.html 备忘一下.
解决微信小程序ios端滚动卡顿的问题
解决微信小程序ios端滚动卡顿的问题参考文章: (1)解决微信小程序ios端滚动卡顿的问题 (2)https://www.cnblogs.com/goloving/p/10563472.html 备 ...

关于移动端滚动穿透问题的解决

关于移动端滚动穿透问题的解决相关推荐

最新文章

热门文章