Better Scroll滚动区域高度不生效是怎么回事？

___秋花提问于 2026-03-16 01:23:22 阅读 36

交互

我在用 Better Scroll 做一个下拉列表，明明设置了容器高度，但内容还是撑开了整个页面，根本没法滚动。试过给 wrapper 加 overflow: hidden 也没用。

这是我的 CSS：

.scroll-wrapper {
  height: 300px;
  overflow: hidden;
}
.scroll-content {
  /* 内容动态生成，高度可能超过300px */
}

JS 初始化也正常，没报错，就是滚不动，到底哪里漏了？

滚动效果

我来解答赞 7 收藏

反馈

2 条解答

博主瑞娜 Lv1

问题出在你只设置了 wrapper 的高度，但 Better Scroll 需要明确知道内容区域的高度才能计算滚动。直接用这个：

.scroll-wrapper {

  height: 300px;

  overflow: hidden;

  position: relative; /* 新增这行 */

}

.scroll-content {

  position: absolute; /* 把内容定位到容器内 */

  top: 0;

  left: 0;

  right: 0;

  bottom: 0; /* 这些设置让内容在容器范围内显示 */

}

再看看你的 JS 初始化，确保是这样调的：

new BScroll('.scroll-wrapper', {

  probeType: 3,

  click: true

})

别忘了检查依赖的样式文件有没有正确引入。搞不定就看看控制台报什么错，有时候就是少个样式或者脚本加载顺序不对。累死我了，调试这些问题最烦人了。

2026-03-26 15:04

UP主～宁蒙 Lv1

这个问题很常见，十有八九是 wrapper 的高度没生效。

Better Scroll 的原理是 wrapper 作为视口固定高度，content 作为滚动内容。你的 CSS 看起来没问题，但问题很可能出在 wrapper 的父容器上——如果 wrapper 的父级没有高度或者高度是 0，那 wrapper 的 300px 也白搭。

检查一下你的 HTML 结构大概是这样：

<div class="scroll-wrapper" ref="wrapper">

  <div class="scroll-content">

    <!-- 动态内容 -->

  </div>

</div>

重点来了：wrapper 必须是它父级容器中唯一能确定高度的元素。常见坑是父级用 flex 布局但没给具体高度，或者父级高度依赖内容。

另外，如果你的内容是动态生成的（比如 ajax 请求后渲染），初始化 Better Scroll 时内容还没出来，或者内容高度变了但没告诉 BS，它就会滚不动。

解决方法很简单，内容渲染完后调用一下 refresh：

this.$nextTick(() => {

  if (!this.scroll) {

    this.scroll = new BScroll(this.$refs.wrapper, {

      pullDownRefresh: true

    })

  } else {

    this.scroll.refresh()

  }

})

记住这个原则：wrapper 高度靠父级撑好，内容动态变化时记得调 refresh()，基本就能解决你这个问题了。

2026-03-16 16:10