在开发小程序中,自定义弹窗上面滚动,导致底部也一起滑动
如左图,接触黑色阴影,会导致底部也一起滑动
解决方案,我总结了以下几种
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;