uniApp prohibits page scrolling under the mask pop-up window

---

question

Recently, I used to uniAppdevelop a software. The page is a long list that can be scrolled. After the pop-up window of the custom component is masked out, slide the screen, and the page will also scroll. I have studied the solutions on the Internet. Adding to
the outermost element of the mask layer may be effective, but it is not ideal. It will cause the pop-up window and the underlying page to not be able to scroll, or report some other errors if it is not handled properly. It is still not very good. simpleview
@touchmove.stop.prevent="moveHandle"

@catchtouchmove="moveHandle"

---

solve

In fact, the root of the problem is the browser’s scrolling penetration problem. There is no fundamental solution yet, but it can be solved by setting the height of the outermost container when the pop-up window is masked out. This method is perfect in my personal test. Dynamically set the value of the
outermost container property of the page when the mask pops up . It is best to use units here , which represent the height of the entire screen, because the page does not exceed one screen, so when sliding on the pop-up window, the underlying scrolling event will not be triggered, and naturally there will be no problem of scrolling penetration. This method requires a custom list scrolling container, which is not a good way, indicating that there is no solutionstyleheight100vhvh100vh

---

the code

<template>
	<view class="container" :style="showMsk ? 'height: 100vh' : ''">
		<!-- 滚动列表 -->
		<scroll-view scroll-y="true"></scroll-view>
		<!-- 自定义弹窗 -->
		<view v-if="showMsk" class="msk"></view>
		<!-- 自定义弹窗 -->
		<!-- <view v-if="showMsk" class="msk" @touchmove.stop.prevent="moveHandle"></view> -->
	</view>
<template>

---

data() {
    
    
	return {
    
    
		showMsk: false,
	};
},
methods: {
    
    
	moveHandle: {
    
    
		return false;
	}
}