Kbone 中如何正确监听页面滚动事件？

❤俊贺提问于 2026-02-28 17:55:20 阅读 16

框架

我在用 Kbone 开发微信小程序，想监听页面的滚动位置，但 onScroll 事件好像不生效。

试过在页面根元素加 bindscroll，也试过用 window.addEventListener('scroll')，都没反应。是不是 Kbone 对滚动事件做了特殊处理？

Page({
  mounted() {
    window.addEventListener('scroll', () => {
      console.log('scrolling...')
    })
  }
})

我来解答赞 3 收藏

反馈

1 条解答

ლ梦雅 Lv1

Kbone 这块确实有坑，小程序的页面滚动机制和 Web 完全不一样，window.addEventListener('scroll') 在 Kbone 里基本是废的，因为小程序的页面滚动走的是原生通道，不是 DOM 那套。

直接说解决方案，有两种方式：

第一种，用小程序原生的 onPageScroll 钩子，这个最稳：

Page({

  onPageScroll(e) {

    console.log('scrollTop:', e.scrollTop)

  }

})

如果你是在 Vue 组件里写，得用 pageLifetimes 配合 onPageScroll：

export default {

  pageLifetimes: {

    show() {

      console.log('页面显示了')

    }

  },

  onPageScroll(e) {

    console.log('滚动位置:', e.scrollTop)

  }

}

第二种，如果你需要更精细的控制，干脆放弃页面级滚动，改用 scroll-view 组件，这样 Kbone 里的事件监听就能正常工作了：


  scroll-y 

  @scroll="onScroll"

  style="height: 100vh"

>

scroll-view 里的 bindscroll 或者 @scroll 在 Kbone 里是正常的，因为它是组件级别的滚动，走的是模拟 DOM 的逻辑。

总结一下，页面级滚动用 onPageScroll，组件级滚动用 scroll-view。bindscroll 加在根元素上没用，小程序的 Page 本身不是个 DOM 节点。

2026-02-28 19:04