Uniapp H5 solves the problem of sliding penetration of the mask layer

Uniapp H5 solves the problem of sliding penetration of the mask layer


This method is mainly used to allow the window on the mask layer to slide, but not to scroll under the mask layer. After the window is closed and dynamically set to document.body.style.overflow = "auto", the original mask layer can continue scroll.

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

slide details
At this time, scrolling will only occur in the area in the red frame, and sliding penetration will not occur below the mask layer, which solves the problem of sliding penetration.

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

Hope to help you.

Guess you like

Origin blog.csdn.net/Soncat2000/article/details/126624331