字节小程序中如何正确监听页面滚动事件？

❤露露提问于 2026-03-23 06:24:22 阅读 100

移动

我在字节小程序里想监听页面的滚动，用了 tt.onPageScroll 但好像没触发，页面结构是普通 scroll-view 包裹内容。是不是必须用页面级滚动才行？试过在 Page 配置里加 enablePullDownRefresh 也没用。

这是我的页面代码：

<scroll-view scroll-y="true" style="height: 100vh;">
  <view>很多内容...</view>
</scroll-view>

然后 JS 里写了：

Page({
  onPageScroll(e) {
    console.log('滚动了', e.scrollTop)
  }
})

但控制台完全没输出，到底该怎么监听才对？

字节小程序

我来解答赞 13 收藏

反馈

2 条解答

码农一诺 Lv1

你遇到的问题其实挺常见的。字节小程序里，tt.onPageScroll只能监听页面级的滚动事件，而不能监听 scroll-view 组件内部的滚动。

要解决你的问题，有两个方案：

第一种方案是把 scroll-view 去掉，直接用页面滚动来实现。在 Page 配置里设置 enablePullDownRefresh: true 只是跟下拉刷新有关，跟滚动事件无关。你需要这样写：

Page({

  onPageScroll(e) {

    console.log('滚动了', e.scrollTop)

  }

})

然后页面结构改成：

<view style="height: 100vh;">

  <view>很多内容...</view>

</view>

第二种方案是如果你必须用 scroll-view 的话，那就得监听 scroll-view 自己的滚动事件 bindscroll：

Page({

  onReady() {

    this.setData({ scrollTop: 0 });

  },

  scrollHandler(e) {

    console.log('滚动了', e.detail.scrollTop);

  }

})

页面代码改成：

<scroll-view scroll-y="true" style="height: 100vh;" bindscroll="scrollHandler">

  <view>很多内容...</view>

</scroll-view>

说实话，我以前也踩过这种坑，API调用有时候真得仔细看文档。希望这能帮你解决问题。

2026-03-30 04:11

光浩 Lv1

试试这个在 scroll-view 上加上 bindscroll 事件，然后在方法里处理滚动逻辑

Page({

  handleScroll(e) {

    console.log('滚动了', e.detail.scrollTop)

  }

})

页面代码里：

很多内容...

2026-03-23 07:00