قبل از شروع کدنویسی، اگر می‌خواهید بیشتر در مورد صفحه‌بندی چیست و چرا به آن نیاز داریم بدانید، وبلاگ من را در اینجا بررسی کنید.
فرض کنید درخواست این است که 50 مورد روی صفحه نمایش داده شود و هر زمان که کاربر به پایین رسید، 50 مورد بعدی را بارگیری کنید.
برای آن باید موقعیت اسکرول را پیگیری کنیم و به مقایسه آن با بدنه سند offsetHeight ادامه دهیم.
برای بدست آوردن موقعیت اسکرول از آن استفاده خواهیم کرد window.scrollY.
اساسا window.scrollY تعداد پیکسل هایی که صفحه به صورت عمودی از بالا پیمایش شده است را نشان می دهد. این به شما می گوید که کاربر چقدر صفحه را به پایین پیمایش کرده است.
همراه با window.scrollY، از دو مقدار دیگر برای بررسی اینکه آیا کاربر به انتهای صفحه رسیده است یا خیر استفاده خواهیم کرد.
window.innerHeight: این نشان دهنده ارتفاع قسمت قابل مشاهده پنجره (نمایشگاه) است. این ارتفاع ناحیه ای است که کاربر در حال حاضر می تواند بدون پیمایش در مرورگر ببیند.
document.body.offset ارتفاع: ارتفاع کل عنصر بدنه را نشان می دهد.
کد:
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({i}
);
}
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 {query.map((q) => q)}
;
}
توضیح: اولین رندر صفحه قلاب useEffect را فعال می کند که یک رویداد اسکرول را اضافه می کند. هر زمان که رویداد اسکرول اتفاق می افتد، متد onScroll() فراخوانی می شود و موقعیت اسکرول را بررسی می کند. اگر در پایین 40 باشد، 50 مورد بیشتر به وضعیت آیتم ها اضافه می شود.
