Jak nieskończony przewijanie w JavaScript?

Podczas projektowania strony internetowej uwaga użytkownika ma wiele ważności. Oprócz tego, tworzenie lepszego przeglądania strony internetowej w porównaniu z paginacją. W drugim przypadku, dzięki czemu strona jest kompatybilna z urządzeniami mobilnymi, które są dostępne dla użytkowników „24/7". W takim przypadku scenariusze, wdrażanie Infinite Scroll w JavaScript jest świetną funkcjonalnością umożliwiającą użytkownikowi angażowanie się „treść„Dogodnie.

Ten blog wyjaśni podejście do wdrożenia Infinite Scroll w JavaScript.

Jak zaimplementować Infinite Scroll w JavaScript?

Nieskończony zwój w JavaScript można wdrożyć za pomocą następujących podejść:

• "addEventListener ()" I "appendChild ()”Metody.
• "Onscroll”Wydarzenie i„Scrolly" nieruchomość.

Podejście 1: Nieskończenie przewijanie w JavaScript za pomocą metod addEventListener () i appendChild ()

„„addEventListener ()”Metoda służy do dołączenia zdarzenia do określonego elementu. „„appendChild ()”Metoda dołącza węzeł do ostatniego dziecka elementu. Metody te można zastosować, aby dołączyć zdarzenie do listy i dołączyć elementy listy jako ostatnie dziecko w nim.

Składnia

element.addEventListener (zdarzenie, słuchacz, użycie);

W podanej składni:

• "wydarzenie”Odnosi się do określonego wydarzenia.
• "słuchacz”Wskazuje na funkcję, która zostanie wywołana.
• "używać”To opcjonalna wartość.

element.appendchild (węzeł)

W powyższej składni:

• "węzeł”Odnosi się do dołączenia węzła.

Przykład
Śledźmy poniżej podanego przykładu:

Nieskończąca lista przewijania

W powyższym kodzie wykonaj następujące kroki:

• Obejmują podany nagłówek.
• Przewiń także „ID" o imieniu "zwój”Na liście nieuporządkowanej.

Przejdźmy do części kodu JavaScript:

W powyższym fragmencie kodu JS:

• Uzyskać dostęp do "lista”Wcześniej określone przez„ID" używając "dokument.QuerySelelect ()" metoda.
• W następnym kroku zainicjuj zmienną „dodać" z "1".
• Dokonaj także funkcji wbudowanej o nazwie „nieskończone przewijania()". W swojej definicji iteruj „Do„Pętla taka”20„Elementy są zawarte na liście.
• Następnie utwórz węzeł elementowy o nazwie „Li”I zwiększają go„1”Odnosząc się do zainicjowanej zmiennej”dodać”Tak, że jest dołączony do utworzonego„lista”Jako dziecko korzystające z„appendChild ()" metoda.
• W dalszym kodeksie załącz wydarzenie o nazwie „zwój". Po wyzwalanym zdarzeniu zostanie powołana podana funkcja.
• Wreszcie, w definicji funkcji, zastosuj funkcje, aby wykryć listę, gdy jest ona przewijana na dno.

Aby stylizować listę, wykonaj następujące kroki:

W powyższych wierszach styguj listę i dostosuj jej wymiary.

Wyjście

Z powyższego wyjścia można zaobserwować, że elementy zwiększają się w nieskończony sposób.

Podejście 2: nieskończenie przewijanie w JavaScript za pomocą zdarzenia onscroll z właściwością Scrolly

„„Onscroll„Wydarzenie wyzwala się, gdy przewijany jest przewijanie elementu. „„Scrolly„Nieruchomość oblicza i zwraca piksele zużywane podczas przewijania dokumentu z lewego górnego rogu okna. Te podejścia można wykorzystać do przymocowania zdarzenia do elementu ciała i przewijania poprzez zastosowanie stanu do pikseli pionowych.

Składnia

obiekt.onScroll = function () code;

W powyższej składni:

• "obiekt”Odnosi się do przewinięcia elementu.

Przykład
Postępujmy zgodnie z poniższymi krokami:

To jest strona internetowa Linuxhint

W powyższym fragmencie kodu:

• Obejmują podany nagłówek.
• Podaj także obraz, który ma być wyświetlany w modelu Document Obiekt (DOM).

Kontynuujmy do części kodu JavaScript:

W powyższych liniach kodu wykonaj następujące kroki:

• Uzyskać dostęp do "ciało„Element, w którym zawarte są podane nagłówek i obraz za pomocą„dokument.QuerySelelect ()" metoda.
• Następnie dołącz „Onscroll„Wydarzenie do tego. Po wyzwalanym zdarzeniu zostanie powołana podana funkcja.
• W definicji funkcji, za każdym razem, gdy użytkownik będzie przewijał w dół, liczba pikseli zostanie sprawdzona.
• Jeśli piksele stają się większe niż wysokość ciała i okna, dołącz „200px„Do aktualnej wysokości ciała, aby przewijać go nieskończenie.

Wyjście

W powyższym wyjściu widać, że zwój jest wdrażany nieskończenie na DOM.

Wniosek

Połączenie „addEventListener ()" I "appendChild ()„Metody lub połączone”Onscroll”Wydarzenie i„Scrolly„Własność można wykorzystać do wdrożenia nieskończonego zwój w JavaScript. Poprzednie podejście można wykorzystać do powiązania wydarzenia i dołączenia listy pozycji jako dziecko Jak tylko lista jest przewijana na dół. To ostatnie podejście można zastosować, aby dołączyć zdarzenie do „ciało”Element i przewiń, sprawdzając piksele pionowe i dołączając niektóre piksele, aby przewijać nieskończenie. Ten samouczek wyjaśnia, jak nieskończenie przewijać w JavaScript.