遮罩-滚动

原始代码地址*

涂层的防渗透

蒙版穿透是指当你使用固定布局显示蒙版时，用手指滑动屏幕时，底部内容会滑动，如图：

当遮罩出现时，您滚动屏幕，底部内容也随之滚动。这叫面罩渗透，也可以叫‘滚动渗透’。当然，当这种情况发生时，用户体验并不好。所以，作为一个有点追求的工程师，当然不允许这种情况发生(手动狗头.)

# #解决方案

在这种重要的情况下，

当遮罩没有滚动条时。当滚动条出现在遮罩1中时。当弹出窗口没有滚动条时。

直接听catch:touchmove方法，然后直接返回。

代码可以查看固定目录中的文件

主代码：

*//wxml * view class=' fixed-mask ' bind : tap=' hideMsak ' wx : if=' { { isshomask } } ' catch : touch move=' stop move ' view class=' mask-container ' view class=' mask _ _ item '我是{ { dog name } }/view/view/view *//CSS *。固定掩码{ position:固定；left : 0；top : 0；高度： 100 VH；宽度： 100 VW；背景技术： # 333；opacity: 0.8z-index : 2；}.mask-container { position:绝对值；top : 50%；左侧：50%；transform: translate(-50%，-50%)；}.mask _ _ item { margin: 0 auto背景-color : # ff 0015；文本对齐：中心；宽度： 500 rpx；高度： 500 rpx；线高： 500 rpx；保证金-底部： 20 rpx；} *//js * stop move(){ return；}效果如下：

以上是当弹出窗口中没有滚动条时，当滚动条出现在弹出窗口中时。

哦，不，弹出窗口不能滚动。

2.当弹出窗口有滚动条时，

方法1:

向底部滚动元素动态添加固定位置。也就是说，当弹出窗口出现时，添加一个类样式类

效果如下：

代码在scroll1文件夹中。

*//css*。底部固定{位置：固定；left : 0；top : 0；飞越：隐藏；} *//wxml * view class=' dog-container { { isshomask ' 'Bottom-fixed ' : ' ' } } '/视图中，可以看到bottom元素固定在页面顶部，而不是单击弹出窗口时的位置。我还没有找到解决办法。如果老板们开会，请给我你的建议。

*方法2: *

滚动视图设置高度和垂直滚动方向。

然而，滚动视图会有一些错误

查看详细信息

代码在scrooll文件夹中

效果如下：

摘要

以上就是边肖介绍的微信小程序中滚动渗透问题的解决方案。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！