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";
},
希望能够给予你帮助。