解决⼩程序中的滚动穿透问题
Mask-Scroll
>
蒙层防穿透问题
> 蒙层穿透就是，当你⽤fixed 布局让蒙层显⽰的时候，⼿指滑动屏幕会出现底部内容也滑动的现象. 如图：
当蒙层出现的时候，你滚动屏幕，底部内容也⼀起跟着滚动。这就是蒙层穿透，也可以叫 '滚动穿透'. 当然出现这种情况，⽤户体验当然是不好的了。所以作为⼀个有点追求的⼯程师当然是不允许这种情况的发⽣了(⼿动狗头...)
## 解决⽅案
这种要分情况，
当蒙层没有滚动条的时候。
当蒙层出现滚动条的时候
1. 当弹窗没有滚动条的时候。
直接监听 catch:touchmove ⽅法，然后直接返回就可以了。代码可以去看⽬录下的⽂件
主要代码：
*// wxml*
<view
class="fixed-mask"
bind:tap="hideMsak"
wx:if="{{isShowMask}}"
catch:touchmove="stopMove">
<view class="mask-container" >
<view class="mask__item">
I am {{dogName}}
</view>
</view>
</view>
*// css*
.
fixed-mask {
position: fixed;
left: 0;
top: 0;
height: 100vh;
width: 100vw;
background: #333;
opacity: 0.8;
z-index: 2;
}
.mask-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.mask__item {
margin: 0 auto;
background-color: #ff0015;
text-align: center;
width: 500rpx;
height: 500rpx;
jquery滚动条滚动到底部
line-height: 500rpx;
margin-bottom: 20rpx;
}
*// js*
stopMove () {
return;
}
效果如下：
上⾯是当弹窗没有滚动条的情况，当弹窗出现滚动条的时候。
哦豁，完蛋，弹窗不能滚动了。
2. 当弹窗有滚动条的时候
⽅法⼀：
动态给底部滚动的元素添加固定定位。也就是当出现弹窗的时候添加⼀个 class 样式类效果如图：
代码在⽂件夹。
*// css*
.bottom-fixed {
position: fixed;
left: 0;
top: 0;
overflow: hidden;
}
*// wxml*
<view class="dog-container {{isShowMask ? 'bottom-fixed' : ''}}"></view>
⼤家可以看到因为底部元素给固定到页⾯顶部了，⽽不是你点击弹窗时出现的位置。⽬前⾃⼰还没有到解决⽅法。如果⼤佬有会的，不吝赐教。。
*⽅法⼆：*
> scroll-view 设置⾼度以及纵向滚动⽅向。
不过scroll-view 会有⼀些bug
代码在⽂件夹
效果如下图：
总结
以上所述是⼩编给⼤家介绍的解决⼩程序中的滚动穿透问题，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！
如果你觉得本⽂对你有帮助，欢迎转载，烦请注明出处，谢谢！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。