小程序显示弹窗时禁止下层的内容滚动的两种方法介绍

小程序显示弹窗时禁止下层的内容滚动的两种方法介绍

本篇文章给大家带来的内容是关于小程序显示弹窗时禁止下层的内容滚动的两种方法介绍，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

① 第一种方式利用position:fixed. 禁止页面滚动.

一. 页面结构html

二. CSS部分

//添加一个类名, 把弹窗的下层内容定位为fixed.实现禁止滚动的效果.indexFixed{ position: fixed; top:0;//top:0可不写,否则显示弹窗的同时会使底层滚动到顶部. left:0; bottom:0; right:0;}-

三. JS部分

②第二种方式

用 catchtouchmove="return"//此处为弹窗内容 //外层加 catchtouchmove="return"仅触摸背景区域时不穿透底部. //在每个小的区域内加 catchtouchmove="return" // 有需要滚动的列表区域位置不要加 catchtouchmove="return", 否则列表无法滚动 滚动列表1 滚动列表2 滚动列表3 滚动列表4-

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。