Scrollend, nowe zdarzenie JavaScript

Usuń funkcje limitu czasu i pozbądź się ich błędów. Oto zdarzenie, którego naprawdę potrzebujesz: scrollend.

Adam Argyle

Przed zdarzeniem scrollend nie było niezawodnego sposobu wykrywania, że przewijanie zostało zakończone. Oznacza to, że zdarzenia były wywoływane zbyt późno lub gdy palec użytkownika nadal znajdował się na ekranie. Ten brak wiarygodności w informacjach o przewijaniu doprowadziło do błędów i pogorszyło wrażenia użytkownika.

document.onscroll = event => {
  clearTimeout(window.scrollEndTimer)
  window.scrollEndTimer = setTimeout(callback, 100)
}

Najwięcej, co strategia setTimeout() może zrobić, to sprawdzić, czy użytkownik przestał przewijać stronę. Sprawia to, że przewijanie jest wstrzymane, ale żaden zakończone wydarzenie.

Po scrollend to przeglądarka robi za Ciebie tę trudną ocenę.

document.onscrollend = event => {…}

To jest to. perfekcyjnie dopasowane w czasie i zawierające wiele istotnych warunków.

Wypróbuj

Szczegóły wydarzenia

Zdarzenie scrollend jest wywoływane, gdy: - przeglądarka nie animuje ani nie przekształca przewijania. – Użytkownik został zwolniony. – wskaźnik użytkownika zwolnił suwak przewijania. – użytkownik zwolnił klawisz. - Ukończono przewijanie do fragmentu. – Dopasowanie do przewijania zostało zakończone. – zakończono zadanie scrollTo(). – użytkownik przewinął widoczny obszar.

Zdarzenie scrollend nie jest wywoływane, gdy: - gest użytkownika nie spowodował żadnych zmian pozycji przewijania (nie nastąpiło przesunięcie). – scrollTo() nie ma tłumaczenia.

Opublikowanie tego zdarzenia na platformie internetowej trwało tak długo, ponieważ wiele osób drobne szczegóły, które wymagają szczegółowych specyfikacji. Jednym z najbardziej skomplikowanych obszarów było określenie szczegółów scrollend w kontekście wizualnego widoku w porównaniu z dokumentem. Powiedzmy, że to strona internetowa, którą powiększasz. W tym stanie powiększenia możesz przewijać, ale niekoniecznie przewija to dokument. Zapewniamy, że nawet ta interakcja polegająca na przewijaniu przez użytkownika w wizualnym widoku wywoła zdarzenie scrollend po jej zakończeniu.

Korzystanie ze zdarzenia

Podobnie jak w przypadku innych zdarzeń przewijania, możesz zarejestrować słuchaczy na kilka sposobów.

addEventListener("scrollend", (event) => {
  // scroll ended
});

aScrollingElement.addEventListener("scrollend", (event) => {
  // scroll ended
});

lub użyj właściwości zdarzenia:

document.onscrollend = (event) => {
  // scroll ended
};

aScrollingElement.onscrollend = (event) => {
  // scroll ended
};

Rozszerzenia i progresywne ulepszanie

Jeśli chcesz już teraz używać tego nowego zdarzenia, oto nasza najlepsza rada. Możesz nadal używać bieżącej strategii końca przewijania (jeśli ją stosujesz) i na samym jej początku skontaktować się z zespołem pomocy:

'onscrollend' in window
// true, if available

W zależności od tego, czy przeglądarka obsługuje dane zdarzenie, wyświetli się wartość prawda lub fałsz. Dzięki temu możesz podzielić kod na gałęzie:

if ('onscrollend' in window) {
  document.onscrollend = callback
}
else {
  document.onscroll = event => {
    clearTimeout(window.scrollEndTimer)
    window.scrollEndTimer = setTimeout(callback, 100)
  }
}

To dobry początek do stopniowego ulepszania zdarzenia scrollend, gdy jest dostępna. Możesz też spróbować polyfilla (NPM), który stworzyłem, aby przeglądarka działała jak najlepiej:

import {scrollend} from "scrollyfills"

// then use scrollend as if it's existed this whole time
document.onscrollend = callback

Kod polyfill będzie się stopniowo usprawniać, aby korzystać z wbudowanej przeglądarki scrollend jeśli jest taka możliwość. Jeśli nie jest dostępny, skrypt śledzi zdarzenia związane z wskaźnikiem i przewijaniem, aby jak najlepiej oszacować czas zakończenia zdarzenia.

Przypadki użycia

Dobrą praktyką jest unikanie intensywnego przetwarzania podczas przewijania. Dzięki temu przewijanie może korzystać z tak dużej ilości pamięci i przetwarzania, na ile pozwala, aby zapewnić płynne działanie. Użycie zdarzenia scrollend zapewnia odpowiedni moment na wywołanie funkcji i wykonanie trudnej pracy, ponieważ przewijanie nie jest już wykonywane.

Zdarzenie scrollend może służyć do wyzwalania różnych działań. Typowym przypadkiem użycia jest synchronizacja powiązanych elementów interfejsu z pozycją, w której zatrzymano przewijanie. Przykłady: - Synchronizacja pozycji przewijania karuzeli z wskaźnikiem kropki. – Synchronizowanie elementu galerii z jego metadanymi. – Pobieranie danych, gdy użytkownik przewinie stronę do nowej karty.

Wyobraź sobie sytuację, w której użytkownik usuwa e-maila. Gdy użytkownik skończy przesuwać, możesz wykonać działanie na podstawie tego, dokąd przewinął.

Tego zdarzenia możesz też użyć do synchronizacji po konwersji automatycznej lub dotyczącej użytkownika czy działań takich jak rejestrowanie statystyk.

Oto dobry przykład, w którym wiele elementów, takich jak strzałki, kropki i punkt skupienia, musi być aktualizowane na podstawie pozycji przewijania. Zobacz, jak utworzyłem tę karuzelę w YouTube Możesz też wypróbować wersję demonstracyjną na żywo.

Dziękujemy Mehdi Kazemi za wkład w rozwiązanie tego problemu oraz Robertowi Flackowi za wskazówki dotyczące interfejsu API i wdrażania.