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

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

在页面的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 方法可能在部分机型上不兼容
  • 动态控制方法更灵活,但实现稍复杂
  • 在弹窗出现时禁止背景滚动是常见需求,可以使用上述方法实现
相关推荐
说私域3 小时前
公域流量向私域流量转化策略研究——基于开源AI智能客服、AI智能名片与S2B2C商城小程序的融合应用
人工智能·小程序
半生过往3 小时前
微信小程序文件下载与预览功能实现详解
微信小程序·小程序·notepad++·压缩包下载解压
源码_V_saaskw3 小时前
JAVA图文短视频交友+自营商城系统源码支持小程序+Android+IOS+H5
java·微信小程序·小程序·uni-app·音视频·交友
weixin_lynhgworld7 小时前
淘宝扭蛋机小程序系统开发:重塑电商互动模式
大数据·小程序
996幸存者8 小时前
uni-app区域选择、支持静态、动态数据
微信小程序·uni-app
ᥬ 小月亮10 小时前
Uniapp编写微信小程序,绘制动态圆环进度条
微信小程序·小程序·uni-app
The_era_achievs_hero16 小时前
UniappDay03
vue.js·微信小程序·uni-app
说私域19 小时前
技术赋能与营销创新:开源链动2+1模式AI智能名片S2B2C商城小程序的流量转化路径研究
人工智能·小程序·开源
游戏开发爱好者81 天前
没有 Mac,如何上架 iOS App?多项目复用与流程标准化实战分享
android·ios·小程序·https·uni-app·iphone·webview
weixin_lynhgworld1 天前
代驾小程序系统开发:引领出行行业数字化转型
小程序