JavaScript Academy · Lekcja

Nieskończone przewijanie

Proszę ładować kolejną zawartość podczas przewijania przez użytkownika.

Nieskończone przewijanie to bezpłatna lekcja JavaScript Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej JavaScript Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs JavaScript Academy zawiera 4 lekcji w sumie.

Czym jest nieskończone przewijanie

Nieskończone przewijanie automatycznie ładuje więcej treści, gdy użytkownik zbliża się do końca listy, zamiast wymagać kliknięcia przycisku Next Page. Jest często stosowane w kanałach społecznościowych i wynikach wyszukiwania.

Schemat elementu sentinel

Najczystsza technika wykorzystuje element sentinel: pusty element umieszczony na końcu listy. Gdy sentinel pojawi się w obszarze widoku, aplikacja pobiera i dodaje kolejną porcję danych.

// Markup pattern:
// <ul id="feed"> ...items... </ul>
// <div id="sentinel"></div>  <!-- trigger element -->

Obserwowanie elementu sentinel

Należy skierować Intersection Observer na element sentinel. Ponieważ znajduje się on za ostatnim elementem, jego widoczność oznacza, że użytkownik dotarł do końca listy.

const sentinel = document.getElementById('sentinel');
const observer = new IntersectionObserver(onIntersect, {
  rootMargin: '200px' // load a bit early
});
observer.observe(sentinel);

Wyzwalanie ładowania

W callbacku należy sprawdzić isIntersecting. Gdy wartość jest równa true, należy wczytać następną stronę danych.

function onIntersect(entries) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      loadMoreItems();
    }
  });
}

Śledzenie strony

Należy przechowywać licznik stron, aby każde ładowanie pobierało kolejny fragment danych. Licznik należy zwiększyć po pomyślnym pobraniu.

let page = 1;

async function loadMoreItems() {
  const items = await fetchPage(page);
  appendItems(items);
  page++;
}

Zabezpieczenie przed wielokrotnym ładowaniem

Callback może być wywoływany wielokrotnie. Należy użyć flagi loading, aby nowe pobieranie nie rozpoczęło się, dopóki poprzednie jest jeszcze w toku.

let loading = false;

async function loadMoreItems() {
  if (loading) return;
  loading = true;
  const items = await fetchPage(page);
  appendItems(items);
  page++;
  loading = false;
}

Dodawanie nowych elementów

Pobrane elementy należy dodać przed elementem sentinel, aby pozostał na dole rozrastającej się listy i mógł wyzwolić następne ładowanie.

function appendItems(items) {
  const feed = document.getElementById('feed');
  items.forEach(item => {
    const li = document.createElement('li');
    li.textContent = item.title;
    feed.appendChild(li);
  });
}

Zatrzymywanie na końcu

Gdy serwer nie zwróci już żadnych danych, należy odłączyć obserwatora, aby przestał próbować ładować kolejne elementy. Zapobiega to niekończącym się pustym żądaniom.

const items = await fetchPage(page);
if (items.length === 0) {
  observer.disconnect(); // no more data
  return;
}

Dlaczego rootMargin pomaga

Duży margines rootMargin, na przykład 200px, rozpoczyna ładowanie, zanim użytkownik faktycznie dotrze do końca. Dzięki temu nowe elementy pojawiają się płynnie, bez widocznej przerwy.

new IntersectionObserver(onIntersect, {
  rootMargin: '300px' // begin loading well before the end
});

Uwagi dotyczące dostępności

Nieskończone przewijanie może utrudniać korzystanie z aplikacji użytkownikom klawiatury i czytników ekranu oraz ukrywać stopkę. Warto rozważyć ręczny przycisk Wczytaj więcej jako rozwiązanie zastępcze i uprzejmie informować o nowych treściach za pomocą regionów ARIA live.

Pełny przebieg

Nieskończone przewijanie z użyciem Intersection Observer wygląda następująco: należy umieścić element sentinel, rozpocząć jego obserwowanie, ładować i dodawać dane po jego pojawieniu się, zabezpieczyć się przed wielokrotnym ładowaniem oraz odłączyć obserwatora po wyczerpaniu danych. Nie są potrzebne żadne obliczenia związane z przewijaniem.

Szybkie sprawdzenie

Sprawdź zrozumienie nieskończonego przewijania.

Podsumowanie

Zbudował Pan/Zbudowała Pani mechanizm nieskończonego przewijania:

Element sentinel jest umieszczony za listą.
Jest obserwowany za pomocą Intersection Observer.
Po przecięciu pobierana i dodawana jest następna strona danych.
Flaga loading zapobiega wielokrotnemu pobieraniu.
Po wyczerpaniu danych obserwator zostaje odłączony.

Następnie zajmiemy się animacjami wyzwalanymi przewijaniem.

Często zadawane pytania

Czy lekcja „Nieskończone przewijanie” jest bezpłatna?

Tak — pełny tekst „Nieskończone przewijanie” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu JavaScript Academy, przejdź na CoddyKit PRO. Kurs JavaScript Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Nieskończone przewijanie”?

Proszę ładować kolejną zawartość podczas przewijania przez użytkownika. Ćwiczysz JavaScript Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć JavaScript Academy?

Nie wymagamy żadnego doświadczenia. JavaScript Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.

Ile czasu zajmuje lekcja „Nieskończone przewijanie”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji JavaScript Academy?

Tak. Każda lekcja JavaScript Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do JavaScript Academy