Implementierung von unendlichem Scrollen in React

Bevor wir mit dem Codieren beginnen, wenn Sie mehr darüber wissen möchten, was Paginierung ist und warum wir sie brauchen, schauen Sie sich hier meinen Blog an.

Angenommen, die Aufgabe besteht darin, 50 Elemente auf dem Bildschirm anzuzeigen und die nächsten 50 Elemente zu laden, wenn der Benutzer ganz nach unten gelangt.
Dazu müssen wir die Bildlaufposition im Auge behalten und sie ständig mit der OffsetHeight des Dokumentkörpers vergleichen.

Um die Scroll-Position zu erhalten, verwenden wir window.scrollY.
Grundsätzlich gibt window.scrollY die Anzahl der Pixel an, um die die Seite vertikal von oben gescrollt wurde. Hier erfahren Sie, wie weit der Benutzer auf der Seite nach unten gescrollt hat.
Zusammen mit window.scrollY verwenden wir zwei weitere Werte, um zu überprüfen, ob der Benutzer das Ende der Seite erreicht hat oder nicht.
window.innerHeight: Dies stellt die Höhe des sichtbaren Teils des Fensters (des Ansichtsfensters) dar. Dies ist die Höhe des Bereichs, den der Benutzer derzeit im Browser sehen kann, ohne zu scrollen.

document.body.offsetHeight: Gibt die Gesamthöhe des Körperelements an.

Code:

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>;
}

Erklärung: Das erste Rendern der Seite löst den useEffect-Hook aus, der ein Scroll-Ereignis hinzufügt. Immer wenn ein Bildlaufereignis auftritt, wird die Methode onScroll() aufgerufen und überprüft die Position des Bildlaufs. Wenn der Wert unter 40 liegt, werden weitere 50 Artikel zum Artikelstatus hinzugefügt.

Das obige ist der detaillierte Inhalt vonImplementierung von unendlichem Scrollen in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!