禁止页面滚动的方法-微信小程序

在微信小程序中，有几种方法可以禁止页面滚动：
一、通过页面配置禁止滚动

在页面的JSON配置文件中设置，此方法完全禁止页面的滚动行为：

{
  "disableScroll": true
}

二、通过 CSS 样式禁止滚动

在页面的WXSS文件中添加：

page {
  height: 100%;
  overflow: hidden;
}

或者针对特定元素：

.scroll-container {
  height: 100vh;
  overflow: hidden;
}

三、JavaScript动态控制滚动

// 禁止滚动
wx.pageScrollTo({
  scrollTop: 0,
  duration: 0
})
// 或者在页面中设置
this.setData({
  canScroll: false
})

<scroll-view scroll-y="{{canScroll}}" style="height: 100vh;">
  <!-- 页面内容 -->
</scroll-view>

四、使用catchtouchmove事件

<view catchtouchmove="preventScroll">
  <!-- 内容 -->
</view>

preventScroll: function() {
  return false;
}

注意事项

• 使用 disableScroll 配置会禁止整个页面的滚动，包括下拉刷新
• CSS 方法可能在部分机型上不兼容
• 动态控制方法更灵活，但实现稍复杂
• 在弹窗出现时禁止背景滚动是常见需求，可以使用上述方法实现