小程序页面滚动穿透

小程序页面滚动穿透

---

打个广告

最近做了一款小程序，有兴趣也可以做了解，微信扫码查看

趣婚礼

【Github】基于Taro2 + 云开发 打造婚礼邀请函

---

一、场景

• 框架： Taro2
• Taro3不生效的
• 在项目当中，基础遇到这样的需求

有一个长列表，或者其他可滚动展示的页面，
在这个页面会弹出一个Modal层，如下：

贝壳找房的 的筛选栏

二、问题

如果这个弹框内容不可滚动，不会有太大问题；

但是当弹出内容是可以滚动的时候，就会有问题，

触摸没有滚动的区域会发现滚动可以穿透，会传递给下面的列表页面，

三、解决办法

程序员是面向Google编程的，找到了下面的解决办法：

• 监听弹框状态，如果弹框展示就给列表 添加对应样式

 // isShowMask 弹框是否展示
 

.bottom-fixed {
    position: fixed;
    left: 0;
    top: 0;
    overflow: hidden;
}

• 给遮罩层添加 catchtouchmove的阻止

myCatchTouch: function () {
    return;
}