Kraken 中如何正确监听页面滚动到底部事件？

欧阳照涵提问于 2026-03-07 16:08:19 阅读 6

框架

我在用 Kraken 开发一个移动端列表页，想实现滚动到底部自动加载更多数据。但按照文档监听 scroll 事件好像没反应，控制台也不报错。

我试过在页面根元素上加监听，也试过用 document.documentElement，都不行。是不是 Kraken 的滚动容器不是默认的 body？下面是我的代码：

document.addEventListener('scroll', () => {
  console.log('scrolling...');
});

我来解答赞 2 收藏

反馈

1 条解答

程序员红梅 Lv1

啊哈，Kraken的滚动监听确实有点不一样。它不是用标准DOM的scroll事件，而是用了自己的实现。你需要在Kraken的根容器上监听，试试这样：

const container = document.querySelector('.kraken-root');

container.addEventListener('scroll', (e) => {

  const { scrollTop, scrollHeight, clientHeight } = e.target;

  if (scrollHeight - scrollTop <= clientHeight + 50) {

    console.log('到达底部了，该加载更多了');

    // 这里放你的加载逻辑

  }

});

几点注意：
1. Kraken默认把.kraken-root作为根容器，所有滚动都在这里面发生
2. 计算是否到底部时加了50px的缓冲，避免频繁触发
3. 用scrollHeight - scrollTop <= clientHeight这个判断更可靠

顺便吐槽下，Kraken这设计真是...就不能老老实实用标准API么。不过既然用了，就按它的规矩来吧。

2026-03-07 17:00