useInfiniteScroll

無限滚動

useInfiniteScroll 偵測使用者何時捲動到容器的邊緣，並觸發回呼以載入更多內容。它接受一個可捲動元素的 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;
}