Unendliches Scrollen ist richtig, wenn Sie die Seitengröße nicht kennen. Ihre Elemente befinden sich im Stream (z. B. Zeitachse). Und die einzige Möglichkeit besteht darin, Artikel in einer Bestellung anzuzeigen. Dann implementieren Sie Infinite Scrolling am besten für die Benutzerfreundlichkeit. Ich habe eine einfache Simulation geschrieben, die neue Elemente lädt, wenn Benutzer auf die letzten Dinge des Scrollens zugreifen. Beispiel- Mini-App-Link

Zuerst benötigen wir einen Listencontainer mit fester Höhe und Überlauf-y-Scrolling-Fähigkeit.

Der zweite Teil besteht aus Informationskartenelementen und einem Loading …-Element. Ladeelement nur bei aktiven Holvorgängen sichtbar.

Scroll-Mechanik

Wenn die Komponente in die App eingebunden wird, fügen wir scrollende Listener zu „infinite-scroll-container“ hinzu und entfernen sie, wenn das Element ausgehängt wird.

Der wesentliche Teil hier ist „Track-Scrolling “. Was werden wir beim Track-Scrolling tun?

• Überprüfen Sie, ob Sie auf den unteren Rand des Bildlaufbereichs zugreifen.
• Wenn Zugriff, dann holen Sie sich einen neuen Datenblock vom Backend
• Und generieren Sie neue Elemente und rendern Sie sie in den Listencontainer

Wir erhalten das DOM-Element mit Hilfe von document.getElementById. Danach berechnen wir den scrollenden Zugriff unten. Wenn der Scrollzugriff nach unten und zum Abrufen von false ausgeführt wird, haben wir mit dem Abrufvorgang begonnen.

if (el.offsetHeight + el.scrollTop >= el.scrollHeight)

      

       is Scroll Access To Bottom function
      

Lass uns weiterlesen 😃

Ähnliche Beispiele und Schriften finden Sie unter diesem Link . Wenn dir diese Geschichte gefällt. Bitte 👏👏 und teilen.

Weitere Inhalte unter plainenglish.io