Uniapp H5 解决遮罩层滑动穿透问题

Uniapp H5 解决遮罩层滑动穿透问题


这个方法主要应用于允许遮罩层上的窗口能够滑动,而遮罩层下无法滚动,窗口关闭后动态设置为document.body.style.overflow = "auto"后,原遮罩层下又能继续滚动。

// 设置为hidden可以禁止遮罩层下的滑动滚动
document.body.style.overflow = "hidden";
// 设置为auto后可以解除原本的禁止状态,还原遮罩层的下的滚动
document.body.style.overflow = "auto";

滑动详情
此时滚动只会发生在红框中的区域,并且不会发生滑动穿透到遮罩层下方,解决滑动穿透问题。

// 设置为动态修改
		onShow() {
			// 将body得样式设置为hidden禁止遮罩层下得滚动,关闭窗口后记得改为auto
			document.body.style.overflow = "auto";
		},
			//此处只粘贴部分代码,为点击确认按钮后的操作,将将窗口设置为hidden,关闭后改为auto
			submit() {
				this.submitBtn = true;
				// 将body得样式设置为hidden禁止遮罩层下得滚动,关闭窗口后记得改为auto
				document.body.style.overflow = "hidden";
			},

希望能够给予你帮助。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值