背景：业务开发中很多modal需要防止滚动穿透的需求，在taro3的早期版本由于设计问题并不支持。官方给出了以下两种解决方案。
摘自taro官网
方案测试
1、方案一：先说结论，大部分场景没有用，很多页面是长页面的需求，需要有长页面滚动和吸顶灯等交互，所以设置overflow：hidden;height: 100vh;会导致页面滚动到顶部。不建议采用
2、方案二：需要升级taro版本，对于使用了taro早期版本的项目并不友好。虽然taro支持了用命令taro update升级项目，但是会有一些依赖冲突导致编译问题。比如在taro项目中使用了style-component方案的linaria就会有难以解决的编译冲突问题（可能后续版本会解决，截止当前文案编辑未解决）。那么如果是新项目呢? 我用3.0.26版本的包测试了下(官方声明3.0.21版本开始支持)。是有效的。 如果项目升级过程没有问题的画就升级吧。
其他方案
1、ScrollView ，可以通过scrollY参数控制是否滚动，不过如果采用ScrollView的话会有布局，api，不可预测bug等其他原因。比如ScrollView可能会限制你滑动并且tab吸顶的布局，（电商等场景）。第二：pageScrollTo等api没失效。第三：很诡异，如果在ScrollView中使用Input，在滑动的时候会导致input中的文字乱串？（实际项目中遇到。确认是微信bug）
基于上面等原因和自己遇到的场景问题，最终采用一下方案
在taro内构建一个小程序原生的组件，用到原生的catchtouchmove事件。代码如下
//frozen-zero.wxml
<view id="{{id}}" class="'frozen-zero' {{className}}" catchtouchmove="move"> <slot></slot></view>//frozen-zero.json
{ "component": true, "usingComponents": {}}//fronzen-zero.js
Component({ properties: { id: { type: String, value: '' }, className: { type: String, value: '' } }, methods: { move: function() {} }})//frozen-zero.wxss
.frozen-zero { position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 999;}
//使用
const demo = () => {
const [needPreventrollingpenetration] = useState(true) return needPreventrollingpenetration ? <frozen-zero>内容</frozen-zero> : <View>内容</View>
}
最后： 希望可以帮到处于水深火热之中的小程序开发者们。如果有其他困难场景欢迎留言
