JavaScript Academy · Lekcja

Obserwowanie widoczności elementów

Proszę utworzyć obserwatora i obserwować elementy.

Obserwowanie widoczności elementów to bezpłatna lekcja JavaScript Academy na CoddyKit. To lekcja 1 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.

Dlaczego Intersection Observer

Tradycyjnie wykrywanie, kiedy element wchodzi do obszaru widoku, wymagało nasłuchiwania zdarzenia scroll i ciągłego wywoływania getBoundingClientRect, co jest powolne i powoduje przycięcia.

Intersection Observer API wydajnie i asynchronicznie obserwuje widoczność, poza głównym wątkiem.

Tworzenie obserwatora

Obserwator tworzy się za pomocą new IntersectionObserver(callback). Callback jest wykonywany za każdym razem, gdy widoczność obserwowanego elementu przekroczy próg.

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    console.log(entry.target, entry.isIntersecting);
  });
});

Obserwowanie elementu

Wywołaj observer.observe(element), aby rozpocząć obserwowanie celu. Jeden obserwator może obserwować wiele elementów.

const box = document.querySelector('.box');
observer.observe(box);

// Watch several at once:
document.querySelectorAll('.card')
  .forEach(el => observer.observe(el));

Flaga isIntersecting

Każdy wpis ma wartość logiczną isIntersecting, która informuje, czy cel aktualnie nakłada się na root (domyślnie obszar widoku).

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('element is now visible');
    }
  });
});

Szczegóły wpisu

Każdy obiekt IntersectionObserverEntry zawiera przydatne dane:

target — obserwowany element
isIntersecting — informacja, czy przecina root
intersectionRatio — jaka część elementu jest widoczna (od 0 do 1)
boundingClientRect — prostokąt zajmowany przez element docelowy

(entries) => {
  entries.forEach(e => {
    console.log('visible portion:', e.intersectionRatio);
  });
}

Opcja threshold

Opcja threshold określa, przy jakich współczynnikach widoczności wywoływany jest callback. Wartość 0 powoduje wywołanie, gdy tylko widoczny jest jeden piksel, a 1 — dopiero wtedy, gdy element jest w pełni widoczny.

const observer = new IntersectionObserver(callback, {
  threshold: 0.5 // fire when 50% visible
});

// You can pass an array for multiple steps:
// threshold: [0, 0.25, 0.5, 0.75, 1]

Opcja root

Domyślnie obserwator wykonuje pomiary względem obszaru widoku przeglądarki. Ustawienie root na przewijalny element nadrzędny pozwala mierzyć widoczność wewnątrz tego kontenera.

const list = document.querySelector('.scroll-area');
const observer = new IntersectionObserver(callback, {
  root: list // measure visibility inside this container
});

Opcja rootMargin

rootMargin powiększa lub pomniejsza prostokąt obwiedni elementu root, podobnie jak marginesy CSS. Wartości dodatnie wywołują callback wcześniej, zanim element faktycznie pojawi się na ekranie.

const observer = new IntersectionObserver(callback, {
  rootMargin: '200px' // start reacting 200px before visible
});

Zatrzymywanie obserwacji

Wywołanie observer.unobserve(element) zatrzymuje obserwowanie jednego elementu, a observer.disconnect() — wszystkich elementów. Jest to ważne podczas sprzątania oraz przy wyzwalaczach jednorazowych.

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      doSomething(entry.target);
      observer.unobserve(entry.target); // fire once
    }
  });
});

Dlaczego jest wydajny

Przeglądarka oblicza przecięcia wewnętrznie i grupuje powiadomienia, zamiast uruchamiać JavaScript przy każdej klatce przewijania. Zapobiega to wielokrotnemu wymuszaniu przeliczania układu i zapewnia płynne przewijanie nawet przy wielu obserwowanych elementach.

Typowe zastosowania

Intersection Observer obsługuje wiele funkcji używanych w rzeczywistych aplikacjach:

leniwe ładowanie obrazów i elementów iframe
nieskończone przewijanie
animacje wyzwalane przewijaniem
śledzenie wyświetleń reklam lub treści

W następnych przykładach zbudujemy kilka z nich.

Szybkie sprawdzenie

Sprawdź zrozumienie podstaw Intersection Observer.

Podsumowanie

Poznał Pan/Poznała Pani podstawy Intersection Observer:

new IntersectionObserver(callback, options) tworzy obserwator.
observe rozpoczyna obserwowanie, a unobserve/disconnect je zatrzymują.
Każdy wpis udostępnia właściwości isIntersecting i intersectionRatio.
Opcje threshold, root i rootMargin pozwalają dostosować moment wywołania callbacku.
Jest znacznie wydajniejszy niż detektory przewijania.

Następnie użyjemy go do leniwego ładowania obrazów.

Często zadawane pytania

Czy lekcja „Obserwowanie widoczności elementów” jest bezpłatna?

Tak — pełny tekst „Obserwowanie widoczności elementów” 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 „Obserwowanie widoczności elementów”?

Proszę utworzyć obserwatora i obserwować elementy. Ć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 1 z 4.

Ile czasu zajmuje lekcja „Obserwowanie widoczności elementów”?

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