uniapp小程序禁止遮罩弹窗下的页面滚动的完美解决办法

问题

最近用uniapp开发一款APP，页面是可以滚动的长列表，自定义组件弹窗遮罩出来后，滑动屏幕底部还在滚动，研究了网上的解决办法：

• 在最外层的view中加入@touchmove.stop.prevent="moveHandle"
• 在最外层的view中加入@catchtouchmove="moveHandle"

我测试了一下这两个事件方法发现不太理想，会导致弹窗和底部页面都不能滚动了，或者处理不当就报一些其他错误，还是不太简便。

解决

又看了一下微信小程序官方技术给的介绍，其实问题的根源是浏览器的滚动穿透问题，目前还没有根本性办法解决，但可以在弹窗遮罩出来时给最外层容器设置高度来解决，亲测这个办法还是比较完美的。

具体方法就是 弹出遮罩时动态设置页面最外层容器 style 属性的 height 值为 100vh。 这里最好使用单位 vh ，100vh 表示整个屏幕的高度，这样因为页面没有超出一屏，所以再在弹窗上滑动时便不会触发底层的滚动事件，自然不会再有滚动穿透这样的问题。

示例代码如下：

<template>
	<view class="container" :style="showMsk ? 'height: 100vh' : ''">
		<!-- 滚动列表 -->
		<scroll-view scroll-y="true">
		</scroll-view>
		<!-- 自定义弹窗 -->
		<view v-if="showMsk" class="msk">
		</view>
	</view>
<template>
<script>
...
data() {
    
	return {
    
		showMsk: false,
	};
},
methods: {
    
	moveHandle: {
    
		return;
	}
}
...
</script