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 dało się w pewny sposób określić, czy przewijanie zostało zakończone. Oznaczało to, że zdarzenia były wywoływane późno lub gdy użytkownik wciąż znajdował się na ekranie. Taki brak informacji o tym, kiedy przewijanie dobiega końca, prowadzi do błędów i pogorszenia komfortu 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 na stronie 100ms. Sprawia to, że przewijanie jest wstrzymane, a nie zakończone.

Po zdarzeniu scrollend przeglądarka wykonuje za Ciebie tę trudną ocenę.

document.onscrollend = event => {…}

To jest dobre rozwiązanie. Idealnie wymierzony w czasie i wypełniony w znaczących warunkach.

Wypróbuj

Szczegóły wydarzenia

Zdarzenie scrollend jest wywoływane, 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 wystąpiło tłumaczenie). – Zapytanie scrollTo() nie zwróciło żadnego tłumaczenia.

Zdarzenie to tak długo mogło pojawić się na platformie internetowej z powodu wielu drobnych szczegółów wymagających szczegółów specyfikacji. Jednym z najbardziej złożonych zagadnień było sformułowanie scrollend szczegółów widocznego obszaru w porównaniu z dokumentem. Powiedzmy, że to strona internetowa, którą powiększasz. Gdy widok jest powiększony, możesz przewijać dookoła. Nie musi to być równoznaczne z przewijaniem dokumentu. Zapewniam, że nawet ta interakcja przewijania w widocznym obszarze, wywoływana przez użytkownika, po zakończeniu wywoła 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. Możesz nadal używać obecnej strategii zakończenia przewijania (jeśli ją masz) i na początku sprawdzić obsługę tych elementów:

'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. Za pomocą tego oznaczenia można rozgałęzić 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 będzie dostępne. Możesz też wypróbować utworzony przeze mnie polyfill (NPM), który działa najlepiej, jak potrafi przeglądarka:

import {scrollend} from "scrollyfills"

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

Stopniowo ulepsza się działanie kodu polyfill w celu korzystania z wbudowanego zdarzenia scrollend w przeglądarce (jeśli jest dostępne). Jeśli nie jest ona dostępna, skrypt monitoruje zdarzenia użycia wskaźnika i przewija je, aby oszacować możliwość zakończenia wydarzenia.

Przykłady zastosowań

Zaleca się unikanie wykonywania dużych nakładów obliczeniowych podczas przewijania. Dzięki temu przewijanie wykorzystuje możliwie największą ilość pamięci i procesu przetwarzania danych, aby zapewnić płynne działanie strony. Użycie zdarzenia scrollend to doskonały moment na wywołanie i wykonanie ciężkiej pracy, ponieważ przewijanie nie jest już aktywne.

Zdarzenie scrollend może służyć do wyzwalania różnych działań. Typowym przypadkiem użycia jest synchronizowanie powiązanych elementów interfejsu z pozycją, w której zostało zatrzymane przewijanie. Przykład: – Synchronizacja 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. Gdy to zrobią, możesz wykonać czynność na podstawie miejsca, do którego przewinął reklamę.

Tych zdarzeń możesz też używać do synchronizacji po zautomatyzowaniu lub przewijaniu przez użytkownika albo do wykonywania działań takich jak logowanie statystyk.

Oto dobry przykład sytuacji, w której wiele elementów, takich jak strzałki, kropki i zaznaczenie, musi być aktualizowanych w zależności od 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.