uni-app开发中，如何在小程序端禁用页面滚动同时保持页面滚动条？

迷人的义霞提问于 2026-02-12 12:43:25 阅读 82

移动

在uni-app项目里用做滚动区域时遇到了问题。我设置了enable-passive-event="true"和CSS的overflow:hidden，在H5端能正常禁用滚动，但微信小程序端页面还能滑动，滚动条也消失了

我尝试在page.json里加了"disableScroll":true，但这样整个页面都不能滚动了。有没有办法让scroll-view保持滚动条显示，同时禁止页面本身的滚动？

现在代码是这样的：

<template>
  <scroll-view class="scroll-box" scroll-y enable-passive-event="true">
    
  </scroll-view>
</template>

<style>
.scroll-box {
  height: 100vh;
  overflow: auto !important;
}
</style>

我来解答赞 11 收藏

反馈

2 条解答

IT人心霞 Lv1

哎这个问题我也遇到过，小程序端确实比较麻烦。我的做法是结合CSS和page.json配置一起搞：

在page.json里加上"disableScroll":true禁用页面滚动，然后在scroll-view外面套个固定高度的容器，这样就能保持滚动条显示。具体代码这样改：

关键点在于container要占满全屏，然后scroll-view继承这个高度。这样小程序端就能保留滚动条但禁止页面滚动了。我上次调这个调了一下午才试出来，小程序这个坑真不少...

对了，如果内容高度不够时滚动条不显示是正常的，只有内容超出容器高度才会出现滚动条。

2026-03-06 16:02

W″恒宇 Lv1

这个问题在 uni-app 多端开发里挺常见的，主要是小程序和 H5 的滚动机制不一样。你加了 overflow: hidden 和 enable-passive-event 对 H5 有效，但微信小程序的页面滚动是 native 层控制的，CSS 控制不了。

推荐的做法是：在页面的 json 配置里设置 "disableScroll": true 来禁止页面滚动，这个没错，但你要确保内容是在 scroll-view 里面滚动的，而不是依赖页面滚动。

至于你说的“保持页面滚动条”——这里得澄清一下，小程序里所谓的“滚动条”其实是系统自带的滑动反馈（比如回弹、惯性滚动），不是 DOM 滚动条。你不能既禁用页面滚动又让页面有滚动条，因为 disableScroll: true 本质就是关闭页面的原生滚动能力。

但你可以这么做来达到视觉和交互一致：

第一，在 page.json 里保留：

{

  "disableScroll": true

}

第二，你的 scroll-view 必须明确设置高度，并且内部内容超出时才能滚动：

<template>

  <scroll-view class="scroll-box" scroll-y enable-passive-event="true">

    <view class="content">

      <!-- 你的内容 -->

    </view>

  </scroll-view>

</template>

第三，样式上要保证 scroll-view 有固定高度，且不依赖外部溢出：

.scroll-box {

  height: 100vh;

  /* 不要用 overflow:hidden，会干掉 scroll-view 的滚动表现 */

}



/* 可选：在 iOS 上模拟滚动条 */

.content {

  -webkit-overflow-scrolling: touch;

}

最后提醒一点：enable-passive-event 要写成 enablePassive 才对，uni-app 编译时才会正确处理，否则属性无效。

总结：用 disableScroll: true 禁页面滚动，靠 scroll-view 实现局部滚动，这是官方推荐模式。别指望小程序页面能显示滚动条，那是 Web 特性，小程序渲染的是原生组件。

2026-02-12 13:11