---
title: "useInfiniteScroll 用法與示例"
description: "無限滚動。"
canonical: https://reactuse.com/zh-Hant/browser/useinfinitescroll/
---

# useInfiniteScroll

無限滚動

`useInfiniteScroll` 偵測使用者何時捲動到容器的邊緣，並觸發回呼以載入更多內容。它接受一個可捲動元素的 ref 和一個回呼函式，並回傳一個帶有載入狀態和手動重置能力的物件。此 hook 處理捲動方向偵測和邊緣到達判定。

### 使用場景

- 使用者捲動到底部時自動載入更多項目以實作無限捲動清單
- 建構連續載入內容的動態消息或時間線
- 在不使用分頁按鈕的情況下為表格或網格新增「載入更多」功能

### 注意事項

- **SSR 安全**：此 hook 在伺服器端渲染時為空操作。伺服器上不會附加捲動監聽器。
- **方向**：預設在 `bottom` 邊緣觸發。使用 `direction` 選項可在 `top`、`left` 或 `right` 邊緣觸發，以實現反向或水平捲動。
- **相關 hooks**：基於 `useScroll` 建構，後者提供底層的捲動位置、方向和到達狀態追蹤。

## Usage

```tsx live

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%%