解决Taro3.x框架Modal蒙层穿透问题

在使用 Taro 框架开发小程序时，我们可能会遇到一个常见问题，即 Modal 蒙层默认情况下是可以滚动的，导致在 Modal 弹出时用户仍然可以滚动页面，造成用户体验上的不便。本文将介绍一种解决方法，以防止 Modal 蒙层的穿透问题。

1. 问题分析

在 Taro 框架中，我们可以通过 @tarojs/components 包提供的 AtModal 组件来创建 Modal 弹窗。该组件允许用户点击蒙层来关闭弹窗，但默认情况下，蒙层是可以滚动的，从而导致在弹窗显示时仍然可以滚动页面。

2. 解决方法

2.1. 在Modal根元素View上绑定属性 catchMove，注意这个属性只有 Taro 3.0.21 才开始支持，测试时请使用真机预览查看。

<View className={rootClass} catchMove>
    <View onClick={this.handleClickOverlay} className='at-modal__overlay'>
      <View className='at-modal__container'>
      ......
      </View>
    </View>
</View>

兼容性：

• Taro 3.0.21才支持
• 你的项目框架大于Taro 3.0.21，可以优先使用此方案

2.2. 网上很多人说的设置定位fixed+记录滚动位置，当然也可以解决，且无taro版本兼容问题，如有需要请移步这里：禁止被穿透的组件滚动