问题背景
在开发的时候,我们的页面超过一屏的高度,上下滚动是经常出现的;但是如果在页面交互的时候,需要有弹出遮罩maks的场景,这时候就会出现滚动穿透的现象?
滚动穿透:就是在弹出遮罩的时候,你上下滑动页面,发现遮罩下面的页面跟着滚动了;
其实不止在小程序中有这个现象,在PC端也经常会出现,这里就先紧着小程序来了;
解决方案
1. 通过css overflow
这个方案的核心逻辑就是监听遮罩是否显示的flg,当遮罩显示的时候,页面容器上设置overflow:hidden;当遮罩关闭的时候,页面容器设置overflow:visible/auto;
在微信小程序社区有看到大佬关于这个问题的回答,很赞!