Wie man in JavaScript unendlich scroll?

Während des Entwerfens einer Webseite ist die Aufmerksamkeit eines Benutzers sehr wichtig. Darüber hinaus erstellen. Im anderen Fall ist die Seite auch mit mobilen Geräten kompatibel, die den Benutzern zur Verfügung stehen24/7”. In solchen Fallszenarien ist die Implementierung der unendlichen Schriftrolle in JavaScript eine großartige Funktionalität, mit der der Benutzer sich darauf einlassen kannInhalt”Bequem.

In diesem Blog wird der Ansatz erläutert, um unendliche Schriftrolle in JavaScript zu implementieren.

So implementieren Sie unendliche Schriftrolle in JavaScript?

Die unendliche Schriftrolle in JavaScript kann unter Verwendung der folgenden Ansätze implementiert werden:

• “AddEventListener ()" Und "appendChild ()”Methoden.
• “ONSCROLLEreignis und “selten" Eigentum.

Ansatz 1: Unendlich scrollen

Der "AddEventListener ()Die Methode wird verwendet, um ein Ereignis an das angegebene Element anzuhängen. Der "appendChild ()Die Methode fügt einen Knoten zum letzten Kind des Elements hinzu. Diese Methoden können angewendet werden, um ein Ereignis an die Liste anzuhängen und die Listenelemente als das letzte Kind anzuhängen.

Syntax

Element.AddEventListener (Ereignis, Listener, Verwendung);

In der angegebenen Syntax:

• “Fall”Bezieht sich auf das angegebene Ereignis.
• “Hörer”Zeigt auf die Funktion, die aufgerufen wird.
• “verwenden”Ist der optionale Wert.

Element.appendChild (Knoten)

In der obigen Syntax:

• “Knoten”Bezieht sich auf den zugefügten Knoten.

Beispiel
Folgen wir dem folgenden Beispiel:

Unendlich Scroll -Liste

Führen Sie im obigen Code die folgenden Schritte aus:

• Fügen Sie die angegebene Überschrift ein.
• Auch die “die“ zuordnenAusweis" genannt "scrollen”Auf die ungeordnete Liste.

Gehen wir mit dem JavaScript -Teil des Codes fort:

Im obigen JS -Code -Snippet:

• Greife auf ... zu "Liste"Vorhanden von seinem" angegeben "Ausweis" Verwendung der "dokumentieren.QuerySelector ()" Methode.
• Im nächsten Schritt initialisieren Sie die Variable “hinzufügen" mit "1”.
• Deklarieren Sie auch eine Inline -Funktion namens “infinitescroll ()”. In seiner Definition eine „iterieren“ “für"Schleife so dass"20Elemente sind in einer Liste enthalten.
• Erstellen Sie danach einen Elementknoten mit dem Namen “li"Und erhöhen Sie es durch"1"In Bezug auf die initialisierte Variable"hinzufügen"So dass es an die Erstellten angehängt ist"Liste"Als Kind benutzt das"appendChild ()" Methode.
• Fügen Sie im weiteren Code ein Ereignis mit dem Namen "bei“scrollen”. Nach dem ausgelösten Ereignis wird die angegebene Funktion aufgerufen.
• Schließlich wenden Sie in der Funktionsdefinition die Funktionalitäten an, um die Liste zu erkennen, wenn sie nach unten gescrollt wird.

Führen Sie die folgenden Schritte aus: Führen Sie die folgenden Schritte aus:

Stylen Sie in den obigen Zeilen die Liste und passen Sie ihre Abmessungen an.

Ausgang

Aus der obigen Ausgabe kann beobachtet werden, dass die Elemente auf unendliche Weise inkrementiert werden.

Ansatz 2: Unendlich scrollen Sie in JavaScript mit einem ONSCROLL

Der "ONSCROLLEreignisauslöser, wenn die Bildlaufleiste eines Elements gescrollt wird. Der "seltenDie Eigenschaft berechnet und gibt die Pixel zurück, die beim Scrollen eines Dokuments aus der oberen linken Ecke des Fensters verzehrt werden. Diese Ansätze können verwendet werden, um ein Ereignis an das Körperelement zu befestigen und zu scrollen, indem eine Erkrankung auf die vertikalen Pixel angewendet wird.

Syntax

Objekt.onScroll = function () Code;

In der obigen Syntax:

• “Objekt”Bezieht sich auf das zu scrollte Element.

Beispiel
Folgen wir den folgenden Schritten:

Dies ist LinuxHint -Website

Im obigen Code -Snippet:

• Fügen Sie die angegebene Überschrift ein.
• Geben Sie außerdem ein Bild an, das im Dokumentobjektmodell (DOM) angezeigt werden soll, das angezeigt wird.

Fahren wir mit dem JavaScript -Teil des Codes fort:

Führen Sie in den obigen Codesteilen die folgenden Schritte aus:

• Greife auf ... zu "KörperElement, in dem die angegebene Überschrift und das Bild mit dem “enthalten sinddokumentieren.QuerySelector ()" Methode.
• Danach eine "anbringen"ONSCROLL”Ereignis dazu. Nach dem ausgelösten Ereignis wird die angegebene Funktion aufgerufen.
• In der Funktionsdefinition wird jedes Mal, wenn der Benutzer nach unten scrollt, die Anzahl der Pixel überprüft.
• Wenn die Pixel größer werden als die Höhe des Körpers und Fensters, appendieren Sie “200pxZur aktuellen Höhe des Körpers, um es unendlich zu scrollen.

Ausgang

In der obigen Ausgabe ist es offensichtlich, dass die Schriftrolle unendlich auf dem DOM implementiert ist.

Abschluss

Die Kombination der “AddEventListener ()" Und "appendChild ()"Methoden oder die Kombination"ONSCROLLEreignis und “seltenEigenschaft kann verwendet werden, um unendliche Schriftrolle in JavaScript zu implementieren. Der erstere Ansatz kann verwendet werden, um ein Ereignis zu verknüpfen und die Liste der Elemente als a Kind Sobald die Liste nach unten gescrollt ist. Der letztere Ansatz kann angewendet werden, um ein Ereignis an das zu anbringenKörperElement und Scrollen, indem Sie die vertikalen Pixel überprüfen und einige Pixel anhängen, um unendlich zu scrollen. In diesem Tutorial wird erläutert, wie man in JavaScript unendlich scrollen kann.