Scrollend, nowe zdarzenie JavaScript

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

Adam Argyle

Przed zdarzeniem scrollend nie było wiarygodnego sposobu wykrycia, że przewijanie . Oznaczało to, że zdarzenia były wywoływane późno lub po naciśnięciu przez użytkownika palca był nadal wyłączony 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)
}

Ta strategia (setTimeout()) może najlepiej sprawdzić, czy przewijanie zostało zatrzymane 100ms 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 dobre rozwiązanie. Z optymalnie wymierzonych w czasie i z wyjątkowymi warunkami przed emisją.

Wypróbuj

Szczegóły wydarzenia

Zdarzenie scrollend jest uruchamiane, gdy: - Przeglądarka nie animuje ani nie tłumaczy przewijania. – Użytkownik został zwolniony. – Wskaźnik użytkownika zwolnił kciuk przewijania. - Naciśnięcie klawisza zostało zwolnione. - Ukończono przewijanie do fragmentu. - Udało się przewinąć ekran. – zakończono zadanie scrollTo(). - Użytkownik przewinął widoczny obszar wizualny.

Zdarzenie scrollend nie jest wywoływane, gdy: – Gest użytkownika nie spowodował zmiany położenia przewijania (nie było tłumaczenia). – Zapytanie scrollTo() nie zwróciło żadnego 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. Jeden z najbardziej złożonych obszarów zdefiniowano scrollend szczegóły dla widoku wizualnego między dokumentem. Powiedzmy, że to strona internetowa, którą powiększasz. Możesz przewijać w takim powiększeniu, a niekoniecznie dokument. Zapewniam, że nawet w tym widocznym obszarze przewijanym przez użytkownika Po zakończeniu interakcja będzie generować zdarzenie scrollend.

Korzystanie z wydarzenia

Tak jak w przypadku innych zdarzeń przewijania, możesz zarejestrować detektory 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
};

Polyfill i progresywne ulepszenie

Jeśli chcesz skorzystać z nowego wydarzenia już teraz, zapoznaj się z naszymi wskazówkami. Dostępne opcje nadal korzystać z obecnej strategii zakończenia przewijania (jeśli ją masz) oraz Na początku sprawdź pomoc:

'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. Na Po sprawdzeniu tej opcji możesz rozgałęziać kod:

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ż wypróbować kod polyfill (NPM) Moje ustawienia działają najlepiej przeglądarka może:

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 zdarzenia. Jeśli nie jest ona dostępna, skrypt monitoruje zdarzenia wskaźników oraz przewiń, aby oszacować możliwość zakończenia zdarzenia.

Przypadki użycia

Zaleca się unikanie wykonywania zadań obliczeniowych podczas przewijania co się dzieje. Dzięki temu przewijanie wykorzystuje tyle pamięci, ile trzeba, aby wszystko działało płynnie. Używam zdarzenia scrollend to idealny moment na wezwanie i ciężką pracę, ponieważ przewijanie już nie będzie.

Zdarzenie scrollend może służyć do wyzwalania różnych działań. Typowy przypadek użycia synchronizuje powiązane elementy interfejsu z pozycją, w której przewija się zatrzymano. Na przykład: – Synchronizowanie pozycji przewijania w karuzeli ze 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. Po zakończeniu możesz więc wykonywać tę czynność na podstawie miejsca, do którego użytkownik przewinął stronę.

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 zaznaczenie, Trzeba zaktualizować na podstawie pozycji przewijania. Zobacz, jak utworzyłem tę karuzelę w YouTube Możesz też wypróbować wersję demonstracyjną na żywo.

Dziękujemy Mehdi Kazemim za pracę inżynierską nad tym zgłoszeniem oraz Robertowi Flackowi za pomoc w zakresie interfejsu API i wdrażania.