在react中實現無限滾動

在我們開始編碼之前，如果您想了解更多關於什麼是分頁以及我們為什麼需要它的信息，請在這裡查看我的博客。

假設要求在螢幕上顯示 50 個項目，每當使用者到達底部時，請載入接下來的 50 個項目。
為此，我們需要追蹤滾動位置並繼續將其與文件主體 offsetHeight 進行比較。

要取得滾動位置，我們將使用window.scrollY.
基本上 window.scrollY 給出頁面從頂部垂直滾動的像素數。它告訴您使用者向下捲動頁面的距離。
除了 window.scrollY 之外，我們還將使用另外兩個值來檢查使用者是否已到達頁面底部。
window.innerHeight: 這表示視窗可見部分（視口）的高度。這是用戶目前在瀏覽器中無需滾動即可看到的區域的高度。

document.body.offsetHeight: 它給了 body 元素的總高度。

代碼：

import { useState, useEffect } from "react";
import "./styles.css";
export default function App() {
  let query = [];
  let [items, setitems] = useState(50);
  for (let i = 1; i <= items; i++) {
    query.push(<p>{i}</p>);
  }

  useEffect(() => {
    const onScroll = () => {
      if (
        window.innerHeight + window.scrollY >=
        document.body.offsetHeight - 40
      ) {
        setitems(items + 50);
      }
    };

    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, [items]);

  return <div className="App">{query.map((q) => q)}</div>;
}

說明：頁面的第一次渲染將觸發 useEffect 鉤子，該鉤子將添加滾動事件。每當滾動事件發生時，都會呼叫 onScroll() 方法，並且它將檢查滾動的位置。如果它位於底部 40，則將更多 50 個項目新增至專案狀態。

以上是在react中實現無限滾動的詳細內容。更多資訊請關注PHP中文網其他相關文章！