小程序页面滚动穿透，弹出层下面页面滚动的解决方法

一、场景

在项目中经常遇到一个页面，如很长的详情页，长的列表页，在这种页面会弹出一个弹框层，如下图：

这个时候就会出现一个问题，当弹窗里面的内容过多，出现滚动条时，弹窗里面的滚动条滑动到了最底部，继续滑动页面，会带动下面的详情页或列表页的继续滑动，触摸没有滚动的区域会发现滚动可以穿透，会传递给下面的列表页或详情页

二、解决办法

网上搜索了一圈，试了一下，

• 监听弹框的状态变量，如果弹框展示，就给对应的列表页面，添加对应的样式

<View className="order_details" style={{
	overflow: isShowPopup ? 'hidden' : '',
	height: isShowPopup ? '100vh' : ''
}}
</View>

这样是弹窗弹出的时候，强制页面只有一屏，当列表页滑动到中间位置，打开弹框，列表页面就会回到顶部，位置都清零了

三、使用ScrollView

• 
  
• 将包裹弹框的最外层元素改为ScrollView，当然这是使用的Taro，其他框架对应
• 并且将该元素添加onTouchMove={this.touchMove}自定义函数

  // 阻止滑动穿透
  touchMove = (e) => {
    e.stopPropagation()
  }

测试

然后在开发者工具上测试，问题解决
真机上测试，问题解决