最近实现了一个弹窗，弹窗出现后有个遮罩，发现在iPhoneXR手机上当滑动遮罩时，遮罩下面的页面也跟着滑动。一番搜索，得知需要加上@touchmove.prevent阻止滑动事件透传到下层：
<div class="dialog" @touchmove.prevent>
<div class="scrollcontent"></div>
</div>
这么修改后，发现弹出dialog之后，下层的内容不滑动了，但是dialog的列表也不能滑动了。原来只需要在遮罩层加上@touchmove.prevent即可，如果在最外层加上，也会影响到正常的滑动内容，所以最终修改如下：
<div class="dialog">
<div class="mask-flex-1" @touchmove.prevent></div>
<div class="scrollcontent"></div>
</div>
1.vue实现一个移动端屏蔽滑动的遮罩层元素代码@touchmove.prevent 防止移动端触摸冒泡 遮罩层...
1.移动端禁止遮罩层下面的页面滑动 答：打开遮罩层的时候，给遮罩层下面的页面添加position:fixed属性，...
遮罩层的获取页面高度 pc端 移动端应加上 阻止浏览器默认滚动行为，即阻止弹出层底部滚动 jq对象和dom对象的转...
在页面上添加遮罩层，效果图如下： 弹出 fixed 弹窗后，在弹窗上滑动会导致下层的页面一起跟着滚动，给当前遮罩层...
上面的.ontouchstart前是需要禁止的对象，当遮罩层弹出的时候，给遮罩层对象添加这个事件，就可以啦，当完成...
移动端禁止页面滑动 场景是这样滴~一般H5活动 达到某一条件弹出提示 往往是遮罩层 用户在遮罩层上只能进行指定的操...
定义：移动端弹出fixed弹窗的话，在弹窗上滑动会导致下层的页面跟着滚动，这个叫“滚动穿透” 解决方案1 在弹出层...
实现遮罩效果 Html CSS 阻止遮罩层下的页面滚动 只需要在遮罩层上加上catchtouchmove='tur...
@touchmove.prevent 在手机端时当里面有弹出层时，阻止弹出层页面滑动@scroll.preven...
@touchmove.prevent 在手机端时当里面有弹出层时，阻止弹出层页面滑动@scroll.preven...
本文标题：Vue移动端阻止遮罩层下层页面被滑动
本文链接：https://www.haomeiwen.com/subject/dxnvhdtx.html
网友评论