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

Good Lucky2025-04-14 12:48

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

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

bash 复制代码

{
  "disableScroll": true
}

二、通过 CSS 样式禁止滚动

在页面的WXSS文件中添加：

css 复制代码

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

或者针对特定元素：

css 复制代码

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

三、JavaScript动态控制滚动

javascript 复制代码

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

html 复制代码

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

四、使用catchtouchmove事件

html 复制代码

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

javascript 复制代码

preventScroll: function() {
  return false;
}

注意事项