小程序显示弹窗时禁止下层的内容滚动实现方法

情况一

弹窗内无滚动情况,在弹窗最外层使用catchtouchmove,这个只在真机上有效


image.png

情况二

弹窗内有滚动内容,弹窗显示时给页面根节点添加fixed,弹窗关闭把页面根节点的fixed去掉


image.png

image.png

image.png

方法二有一个缺陷时关闭弹窗后 下面的数据就回到顶部

解决方法监听滚动高度,利用wx.pageScrollTo方法在滚动到之前的位置

image.png

topNum是页面滚动的高度
在打开弹窗的时候记录页面滚动的高度

image.png

在关闭的弹窗的时候滚动回打开弹窗时候的位置
image.png

参考文章:https://blog.csdn.net/u012011360/article/details/90605779
https://developers.weixin.qq.com/miniprogram/dev/api/ui/scroll/wx.pageScrollTo.html

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容