微信小程序scroll-view实现滚动穿透和阻止滚动的方法

scroll-view滚动穿透，阻止滚动 页面弹窗阻止滚动是一种常见的问题，这里简单介绍小程序scroll-view的一种解决方式 常用阻止滚动方式 在不使用scroll-view的弹窗中, 为position为absolute或fixed的元素设置catchtouchmove空事件就可以阻止弹窗下的页面因事件穿透滚动 <view catchtouchmove=doNothing></view> 也可直接写catchtouchmove，相当于绑定了事件名为true的事件 问题场景 在小程序中，在absolute或fixed的类弹窗布局中。要显示列表、长文本段落等可滚动元素，必须使用 在微信小程序开发中，`scroll-view`组件是一个非常重要的元素，用于实现页面内可滚动的内容区域。然而，当需要在`scroll-view`上方展示一个弹窗或者浮动元素时，经常会遇到滚动穿透的问题，即弹窗背后的`scroll-view`仍然可以滚动。这会影响到用户的交互体验，因此需要采取措施来阻止这种情况发生。 ### 常用阻止滚动方式 针对滚动穿透问题，一种常见的解决方案是在弹窗元素上设置`catchtouchmove`属性。这个属性的作用是捕获触摸移动事件，当设置为`true`或绑定一个空方法时，可以阻止事件穿透到下层元素。例如： ```html <view catchtouchmove="doNothing"></view> ``` 或者简化写法： ```html <view catchtouchmove></view> ``` 这里`doNothing`是一个不存在的函数，起到阻止事件处理的效果。 ### 问题场景 在微信小程序中，如果弹窗使用了`absolute`或`fixed`定位，且弹窗内部需要显示可滚动的内容（如列表或长文本），则必须使用`scroll-view`组件。但是，此时会发现即使设置了`catchtouchmove`，也无法完全阻止页面本身的滚动。 ### 解决办法 由于无法直接阻止事件穿透，开发者需要在可滚动元素自身上寻找解决策略。以下是一种常见的解决方案： 1. **设置页面高度**：将`page`的高度设为100%，并在页面最外层添加一个`view`。当弹窗出现时，通过修改`view`的样式（例如增加一个`class`），将其高度设为100%，并设置`overflow-y: hidden`来阻止页面滚动。 ```html <view class="{{isStopBodyScroll ? 'scroll-lock' : ''}}"> <!-- 页面内容 --> </view> ``` 2. **动态控制样式**：在数据绑定中，根据`isStopBodyScroll`的状态来决定是否开启滚动锁定。 ```css .scroll-lock { height: 100%; overflow-y: hidden; } ``` 然而，这种解决方案有一个问题，即当阻止页面滚动时，页面位置会跳回顶部。这可能会打断用户的浏览流程，因此开发者一直在寻找更优雅的解决方案。 ### 存在的问题与期望 目前，上述方法虽然能基本解决问题，但存在页面滚动位置重置的问题，导致用户体验受到影响。开发者期待微信小程序官方能提供更好的原生支持，或者提供一种不会影响页面滚动位置的解决方案。 微信小程序的`scroll-view`滚动穿透和阻止滚动是开发者在实现交互效果时经常遇到的问题。通过合理设置`catchtouchmove`属性和动态调整页面样式，可以缓解这一问题，但仍有待优化。随着微信小程序框架的不断更新和完善，相信未来会有更理想的解决策略。