قبل أن نبدأ في البرمجة، إذا كنت تريد معرفة المزيد حول ما هو ترقيم الصفحات ولماذا نحتاج إليه، قم بمراجعة مدونتي هنا.

لنفترض أن الطلب هو عرض 50 عنصرًا على الشاشة وكلما وصل المستخدم إلى الأسفل، قم بتحميل العناصر الخمسين التالية.
ولهذا نحتاج إلى تتبع موضع التمرير ومواصلة مقارنته مع إزاحة نص المستند.

للحصول على موضع التمرير، سنستخدم window.scrollY.
بشكل أساسي، يعطي window.scrollY عدد وحدات البكسل التي تم تمرير الصفحة عموديًا من الأعلى. يخبرك بالمدى الذي انتقل إليه المستخدم إلى أسفل الصفحة.
بالإضافة إلى window.scrollY، سنستخدم قيمتين إضافيتين للتحقق مما إذا كان المستخدم قد وصل إلى أسفل الصفحة أم لا.
window.innerHeight: يمثل هذا ارتفاع الجزء المرئي من النافذة (منفذ العرض). إنه ارتفاع المنطقة التي يمكن للمستخدم رؤيتها حاليًا في المتصفح دون التمرير.

document.body.offsetHeight: يعطي الارتفاع الكلي لعنصر الجسم.

شفرة:

import { useState, useEffect } from "react";
import "./styles.css";
export default function App() {
  let query = [];
  let [items, setitems] = useState(50);
  for (let i = 1; i {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 عنصرًا آخر إلى حالة العناصر.