useInfiniteScroll

无限滚动

useInfiniteScroll 基于 useScroll 构建，当用户滚动接近可滚动容器边缘时自动触发回调。传入一个目标元素 ref、一个加载更多函数和可选配置（滚动方向、距离阈值、节流）。加载更多回调接收当前滚动状态，便于你决定是否获取更多数据。该 hook 还支持在前置内容时保留滚动位置。

使用场景

• 构建在用户滚动时加载更多项目的信息流、时间线或产品列表
• 实现滚动到顶部时加载更早消息的聊天界面
• 创建按需获取额外内容的水平滚动画廊

注意事项

• SSR 安全：该 hook 在服务端渲染期间为空操作。服务端不会附加滚动监听器。
• 方向：默认在 bottom 边缘触发。使用 direction 选项在 top、left 或 right 边缘触发，用于反向或水平滚动。
• 相关 hooks：基于 useScroll 构建，后者提供底层的滚动位置、方向和到达状态跟踪。

Usage

function Demo() {
  const ref = useRef<HTMLDivElement>(null);
  const [data, setData] = useState([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);

  useInfiniteScroll(
    ref,
    () => {
      const length = data.length + 1;
      const newData = data.slice();
      if (newData.length === 400) {
        return;
      }
      newData.push(...Array.from({ length: 5 }, (_, i) => length + i));
      setData(newData);
    },
    { distance: 10 },
  );

  return (
    <div>
      <div ref={ref} style={{ width: 300, height: 300, overflow: "scroll" }}>
        {data.map(item => (
          <div key={item} style={{ padding: 12, border: "1px solid" }}>
            项目-{item}
          </div>
        ))}
      </div>
    </div>
  );
};

API

useInfiniteScroll

Returns

void

Arguments

UseInfiniteScrollLoadMore

Returns

void | Promise<void>

Arguments

UseInfiniteScrollOptions

UseInfiniteScrollArrivedState

UseInfiniteScrollDirection

BasicTarget

export type BasicTarget<T extends TargetType = Element> = (() => TargetValue<T>) | TargetValue<T> | MutableRefObject<TargetValue<T>>;

TargetValue

type TargetValue<T> = T | undefined | null;

TargetType

type TargetType = HTMLElement | Element | Window | Document | EventTarget;

UseScrollOffset

export interface UseScrollOffset {
  left?: number;
  right?: number;
  top?: number;
  bottom?: number;
}