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

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

框架

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

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

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

我来解答赞 4 收藏

反馈

2 条解答

UX普涵 Lv1

Kbone里滚动监听确实有点坑，我昨天刚踩过这个坑。主要问题是小程序和web的滚动机制不一样，直接套用web那套行不通。

先检查一下你的scroll-view组件是不是设置了scroll-y属性，这个必须要有。然后在小程序环境要用catchscroll或bindscroll事件，不能用window.addEventListener。

正确姿势是：

Page({

  data: {

    scrollTop: 0

  },

  onScroll(e) {

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

    this.setData({ scrollTop: e.detail.scrollTop })

  }

})

模板里要这样写：


  scroll-y 

  style="height:100vh" 

  bindscroll="onScroll"

>

另外吐槽下，Kbone的文档写得真是一言难尽，这种细节都不写清楚，害得我debug了半天...

2026-03-06 09:08

ლ梦雅 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