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

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

框架

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

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

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

我来解答赞 10 收藏

反馈

2 条解答

UX-路杨 Lv1

Kraken 里的滚动监听跟普通 Web 开发不太一样，你不能直接用 document.addEventListener('scroll')，因为 Kraken 用的是 Flutter 的滚动机制。

在 Kraken 中正确的方式是用 ScrollView 组件配合 onScroll 回调：

import { ScrollView } from 'kraken';



ScrollView(

  onScroll: (event) {

    // event 里有 scrollOffset、maxScrollExtent、viewportDimension 这些属性

    const { scrollOffset, maxScrollExtent, viewportDimension } = event;

    

    // 当滚动位置接近底部时触发

    if (scrollOffset >= maxScrollExtent - viewportDimension * 0.5) {

      console.log('滚动到底部了');

      // 这里调用你的加载更多方法

    }

  },

  child: YourListWidget(),

);

如果你需要更灵活的控制，可以用一个 ScrollController：

import { ScrollView, ScrollController } from 'kraken';



const controller = new ScrollController();



ScrollView(

  controller: controller,

  onScroll: (event) {

    // 同样的逻辑

  },

  child: YourListWidget(),

);

关键点就是 Kraken 的滚动是 Flutter 那一套，不是原生 DOM 事件。你用的 document.addEventListener 根本不会触发，因为 Kraken 内部根本没发原生 scroll 事件出来。

2026-03-18 23:26

程序员红梅 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