页面滚动穿透解决方案

问题

移动端当有 fixed 遮罩背景和弹出层时，在屏幕上滑动能够滑动背景下面的内容。

这是封装的一个方法，

StopBodyScroll: function (isFixed) {try {var bodyEl = document.body;if (isFixed) {var top = window.scrollYbodyEl.style.position = 'fixed'bodyEl.style.top = -top + 'px'} else {bodyEl.style.position = ''bodyEl.style.top = ''window.scrollTo(0, top) // 回到原先的top}} catch (err) {console.log(err);}
},

参数为true 或 false

true为背景滚动禁用，

每次触发弹窗的时候调用，关闭弹窗的时候再调用关闭。

页面滚动穿透解决方案相关推荐

移动页面滚动穿透解决方案（荐）
为什么80%的码农都做不了架构师?>>> 移动页面滚动穿透解决方法目前有多种解决方案,我介绍下几种方案: 解决方案1:阻止冒泡. //关键代码 $(".sliders ...
移动端页面滚动穿透问题解决方案
移动端页面滚动穿透问题解决方案参考文章: (1)移动端页面滚动穿透问题解决方案 (2)https://www.cnblogs.com/GeniusLyzh/p/5808446.html 备忘一下.
记录一次小程序滚动穿透解决方案
场景描述: 自定义的小程序弹窗中存在列表滚动,手机操作时发现有滚动穿透现象个人觉得一个比较好用的方法====>: 底层页面使用scroll-view组件包裹,设置垂直滚动,高度设置为屏幕高度, ...
锚点与页面滚动事件解决方案（H5、小程序）
H5 具体效果如下图,实现效果就是点击上面的标题跳转到相对应区域,滚动到对应区域时候吸顶的标题栏高亮页面结构 //吸顶的标题栏采用vant组件 <van-sticky scroll=" ...
小程序滚动穿透解决方案
在遮罩层添加catchtouchmove <view class="modal-cover" catchtouchmove><!-- 弹出层需要滚动使用 scro ...
Vue 滚动事件穿透解决方案
移动端阻止默认事件 <div class="test" @touchmove.prevent></div> PC // 停止页面滚动stopMove() ...
h5页面弹窗滚动穿透的思考
可能我们经常做这样的弹窗对吧,兴许我们绝对很简单,两下搞定: 弹窗的页面结构代码: <div class="mas ...
datagrid底部显示水平滚动_滚动穿透问题探索
在移动端开发中,模态(Modal)弹窗可以说是非常之常见了,作为正在看这篇文章的你,可能写过基于Vue或者小程序的统一弹窗Modal组件:可能处理过定宽高或者不定宽高的情况等,看起来一个小小的模态框其 ...
页面无法滚动_【前端词典】滚动穿透问题的解决方案
点击上方"前端真好玩",喜欢他就关注他听说,看恺哥的文章会上瘾背景产品有三宝,弹窗,浮层加引导: 设计有三宝,透明,阴影加圆角: 运营有三宝,短信,推送加红包: 程序员有一宝 ...

页面滚动穿透解决方案

问题

页面滚动穿透解决方案相关推荐

最新文章

热门文章