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

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

在页面的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;
}

注意事项

  • 使用 disableScroll 配置会禁止整个页面的滚动,包括下拉刷新
  • CSS 方法可能在部分机型上不兼容
  • 动态控制方法更灵活,但实现稍复杂
  • 在弹窗出现时禁止背景滚动是常见需求,可以使用上述方法实现
相关推荐
走,带你去玩8 小时前
uniapp 微信小程序水印
微信小程序·小程序·uni-app
是一碗螺丝粉8 小时前
🔥 微信H5视频自动播放终极秘籍:WeixinJSBridge竟是官方“通行证”?
微信小程序
一笑code9 小时前
vue/微信小程序/h5 实现react的boundary
微信小程序·vue·react
菌菇汤10 小时前
uni-app实现单选,多选也能搜索,勾选,选择,回显
前端·javascript·vue.js·微信小程序·uni-app·app
CC同学呀17 小时前
从0到100:单位订餐统计小程序开发日记2025
小程序
666HZ6661 天前
微信小程序中scss、ts、wxml
微信小程序·小程序·scss
二十十十十十1 天前
微信点餐小程序—美食物
微信·小程序
向明天乄1 天前
在小程序中实现实时聊天:WebSocket最佳实践
websocket·网络协议·小程序
h185385922441 天前
租车小程序电动车租赁小程序php方案
小程序
海的诗篇_1 天前
前端开发面试题总结-原生小程序部分
前端·javascript·面试·小程序·vue·html