解决微信小程序自定义弹窗，滑动导致底部也一起滑动的几种方案

在开发小程序中，自定义弹窗上面滚动，导致底部也一起滑动
如左图，接触黑色阴影，会导致底部也一起滑动

解决方案，我总结了以下几种

1、控制底部根目录scroll-view 的scroll-y属性的true/false，控制底部滚动以及不滚动

2、在自定义弹框最外层元素加上catchtouchmove=’true’ ；或者catchtouchmove="preventTouchMove"

Pages({

  preventTouchMove() {}

})

注意！！！，使用场景！！！

适用于自定义内弹框不包含scroll-view 情况下；
此时底部根目录可以不为scroll-view 也可以生效
而且必须真机测试，电脑客户端不行

3、底部最外层scroll-view 的scroll-y属性恒为true

css height 100vh

自定义弹框只需要position：fixed。底层就不会滚动了，这个应该是最近几个版本微信更新了，自定义弹窗的滚动事件不会冒泡到底部scroll-view了

这个方案好像在华为H60-41微信版本6.73等少部分手机会出现闪屏，这个只是猜测而已；还没有详细测试，先备注下

 

 期待更多的解决方案，印象中前几个月，第三个方案是不可行的

 

问题引申，当外层scroll-view 使用padding-bottom ，（可能为了底部导航栏加的padding-bottom）；

自定义弹窗打开以后，底部会有100vh+padding-bottom 的滚动范围。要想解决这个问题，增加box-sizing 属性为border-box；

这个时候还是有问题，上滑下滑都会在100vh-padding-bottom内滚动，页面底部会看到padding-bottom的固定。

解决方案，自己加一个view，申明高度，代替padding-bottom；