解决小程序的遮罩层滚动穿透

最新推荐文章于 2021-08-20 15:58:58 发布
最新推荐文章于 2021-08-20 15:58:58 发布
阅读量197 收藏
点赞数
分类专栏： 小程序 文章标签： javascript css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/eiwqjeioqw/article/details/106983633
版权

如果需要解决遮罩层滚动穿透的问题
可以在遮罩层上添加preventTouchMove:function(){}这个方法

<view class="mask" catchtouchmove="preventTouchMove">
    我是遮罩层
</view>
可爱的芜小七
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html 遮罩层穿透问题,移动页面点击穿透问题解决方案
weixin_39923572的博客
06-09 2112
近期在做页面的时候，遇到了点击遮罩层时穿透下层的checkbox的问题，由于为了兼顾用户的流畅度，只能使用tap事件，click事件虽然解决了穿透的问题，但总会有300ms的延时，因此最终使用settimeout方法规避了这个问题。下面是我找到的一篇造成这些问题的简单分析，希望对大家有用！一.click与300ms延迟移动浏览器提供一个特殊的功能：双击(double tap)放大300ms的延迟就...
遮罩层，tap点透事件
yangbaobao的博客
08-10 913
tap和click的区别： 两者都会在点击时触发，但是在web手机端，clikc会有200-300ms的延时，所以要用tap代替click作为点击事件，singleTap和doubleTap分别作为单次点击和双击，但是使用tap会带来点透事件(事件穿透) tap事件穿透： 执行完上层当A/B两个层上下Z轴叠层，上层的A点击后消失或者移开（原因接下来会讲），当B元素本身默认有click事件或者...
vue移动端遮罩层滚动穿透问题
weixin_47813845的博客
08-06 1492
今天小编在做项目的时候发现了一个问题，各种查资料才得以解决。下面来简单介绍一下问题： 在页面中，我们需要点击按钮展示一个遮罩层，且遮罩层里面内容可滚动，但是遮罩层盖住的区域不可滚动，这样一个问题。 搜索之后发现，在遮罩层标签上添加这样一个代码@touchmove.prevent.stop @mousewheel.prevent可以实现禁止页面滚动，但是遮罩层内容也不可以滚动，所以这个方案pass，如果你们遇到不需要遮罩层内容滚动的话，可以采用这样的方法。 下面来介绍下解决方法： 首先我们在data里
JS遮罩层完美弹出Div(滚动条不可动)
12-11
用JS遮罩层完美弹出Div，并且滚动条完美屏蔽掉。。绝对是您完美的学习例子
1.解决小程序遮罩层遮住页面后滚动穿透问题
qq_43544841的博客
08-20 8449
小程序遮罩层遮住页面后滚动穿透问题分为两种情况： 1.蒙层mask没有滚动事件的情况 可以在mask这个view上直接添加事件catchtouchmove="ture"来防止滚动或者写一个方法也可以 代码如下： <view class="mask" wx:if="{{showModelcontact}}" catchtouchmove="prevent"></view> <!-- js --> prevent:function(){} 2.如果
解决微信小程序中的滚动穿透问题
12-13
在微信小程序开发中，经常会遇到一个用户体验上的问题，即“滚动穿透”或称为“蒙层穿透”。这个问题发生在当用户打开一个使用`fixed`布局的蒙层（如弹窗）时，即使手指在蒙层上滑动，底部内容也会跟随滚动。这显然...
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
10-18
滚动穿透通常发生在弹窗或半透明遮罩层出现时，用户在这些层上滑动，但希望底层页面的内容能够继续滚动。为了解决这个问题，我们可以利用`catchtouchmove`属性。当一个元素具有`catchtouchmove`属性时，它会捕获触摸...
vue 遮罩层阻止默认滚动事件操作
11-20
在构建移动端页面时，我们经常会遇到这样一个问题：当弹出遮罩层或...对于移动端和 PC 端，我们可以根据具体需求选择合适的解决方案，以确保在弹出层或遮罩层出现时，页面滚动被正确地控制，从而提供更佳的用户体验。
【小程序】解决小程序遮罩层滑动事件的穿透问题
qing_小诺的博客
01-08 9609
1、问题描述： 滑动自定义的遮罩层，会出现滚动穿透的问题，如下图，即遮罩层下面的列表页面依旧可以滚动。 2、解决办法：分为两种情况： 情况1：【遮罩层没有滚动事件】 直接在遮罩层的父节点上添加catchtouchmove="preventTouchMove"属性，例如： &lt;view class="mask" catchtouchmove="preventTouchMove"&...
小程序遮罩层上下滑动穿透 ---- 解决方法
qq_42699996的博客
05-09 2232
最外层元素加上事件catchtouchmove 遮罩层元素加上事件catchtouchmove WXML //外层元素 <view catchtouchmove='{{stopPageScroll}}'></view> //遮罩层元素 <view class='mask' wx:if="{{maskShow}}" catchtouchmove='{{stopPageS...
微信小程序中遮罩层滚动穿透问题(view增加一个属性解决)
czw
09-25 1万+
微信小程序中遮罩层滚动穿透问题
小程序：微信小程序中遮罩层的滚动穿透问题
热门推荐
mcYang0929的博客
01-25 1万+
1.如果弹出层没有滚动事件，就直接在蒙板上加catchtouchmove=”move” move:function(){};wxml <view class='mask' catchtouchmove="move"></view>js //在page中添加一个函数 //这个函数内容为空 move:function(){}2.如果弹出层有滚动事件,那么在弹出层出现的时候给底部的content加上一个c
小程序 遮罩层（阻止事件穿透）
qq_41913971的博客
01-07 6963
小程序 遮罩层（阻止事件穿透） 若弹出层没有滚动事件 直接在蒙板上加catchtouchmove=“preventTouchMove” 即可 <view class="mask" catchtouchmove="preventTouchMove"> 我是遮罩层 </view> 若弹出层有滚动事件 需要动态监听遮罩层的现实和隐藏，然后给底部滚动内容添加动态样式...
小程序防止点击遮罩层后遮罩层下面也反应（有点击事件）
MoTec的博客
08-11 1万+
最近在做自定义弹窗，不免会使用到遮罩层或者说蒙层。 但是关键是，有遮罩层后，再点击遮罩层下的组件，依然会产生点击事件。 那如何解决这个问题呢 ？ 网上给出了几种方法 1 . 在遮罩层 view 中添加 catchtouchmove 点击事件。因为 catch 事件绑定可以阻止冒泡事件向上冒泡。 &amp;amp;lt;view class=&amp;quot;mask&amp;quot; catchtouchmove=&amp;quot;preventTo...
微信小程序、vue遮罩层出现禁止穿透遮罩滚动页面
weixin_43837268的博客
06-15 3639
<div class="detail-wrapper1" @touchmove.prevent> <div>
小程序防止遮罩层穿透
qq_39206793的博客
03-01 1104
小程序防止遮罩层穿透 直接在遮罩层上添加catchtouchmove=&quot;move&quot; 即可，添加后控制台会一直警报，有强迫症的可以在js里添加一个 move:function(){}方法
移动端vue项目解决遮罩层滚动穿透问题
Chelle1110的博客
08-30 9094
网上有好几种方法，对于我来说，常用的就两种， 1、当弹框明显小于页面的时候，确保不需要滑动查看内容时，可在最外层的遮盖层添加  ：@touchmove.prevent   2、弹框的内容明显长过屏幕，需要弹框内容滑动，主页页面不滑动 （1）在html文件添加如下代码 &lt;script type="text/javascript"&gt; //解决遮罩层滚动穿透问题，分别在遮...
关于小程序遮罩层滚动穿透问题（uni-app、微信小程序实测）
李水灵的博客
04-27 4145
先上一张示例图，但是因为公司的项目不便展示数据内容 就是上面这一层可以随意滚动选择 这个问题遇到的时候我找了很多解决方法，什么说给元素增加事件等等，写JS等，基本都不可行。 下面说一下应该怎么操作实现 uni-app中我使用的是uni自带的抽屉组件，直接上代码 <uni-drawer :visible="drawerShow" mode="right"> <vi...
小程序防止点击遮罩层遮罩层下面也反应
caoyan0829的博客
04-03 9236
&lt;view class='selector-bj' wx:if="{{selectorBj}}" bindtap='tapSeleBj' catchtouchmove="preventD"&gt;&lt;/view&gt; 这是遮罩层   在其中加上catchtouchmove="preventD" 为防止冒泡事件，就可以了。       最后分享一个公众号二维码，写一些散文和...
vue遮罩层滚轮穿透
最新发布
05-26
为了防止滚动穿透，可以给遮罩层的父元素设置 `overflow: hidden`，这样在遮罩层出现时，页面的滚动条就会被隐藏掉，避免了滚动穿透的问题。 以下是一个示例代码： ``` 显示遮罩层 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值