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";
			},

希望能够给予你帮助。

猜你喜欢

转载自blog.csdn.net/Soncat2000/article/details/126624331