Scrollend, nowe zdarzenie JavaScript

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

Adam Argyle

Twitter GitHub

Przed zdarzeniem scrollend nie było wiarygodnego sposobu na wykrycie, że przewijanie zostało ukończone. Oznaczało to, że zdarzenia uruchamiały się późno lub gdy palec użytkownika pozostawał w dół. Niska wiarygodność dotycząca informacji o zakończeniu przewijania spowodowała błędy i obniżyły komfort użytkownika.

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

Ta strategia setTimeout() może najlepiej wiedzieć, czy przewijanie zostało zatrzymane w przypadku elementu 100ms. Dzięki temu wygląda to bardziej jak zdarzenie wstrzymania przewijania, a nie zakończenia przewijania.

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

document.onscrollend = event => {…}

To jest to. Idealnie ustawiony na czas i pełen istotnych warunków przed wysłaniem.

Wypróbuj

Szczegóły wydarzenia

Zdarzenie scrollend jest uruchamiane, gdy: – przeglądarka nie animuje już ani nie tłumaczy przewijania. - Dotknięcie użytkownika zostało anulowane. - Wskaźnik użytkownika zwolnił kciuk przewijania. - Naciśnięcie klawisza użytkownika zostało zwolnione. - Zakończono przewijanie do fragmentu. - Zakończenie przewijania. – scrollTo() zostało zakończone. - Użytkownik przewinął widoczny obszar.

Zdarzenie scrollend nie jest wywoływane, gdy: – Gest użytkownika nie spowodował zmiany położenia przewijania (nie wystąpiło tłumaczenie). – scrollTo() nie zwróciło żadnego tłumaczenia.

Powodem pojawienia się tego zdarzenia tak długo na platformie internetowej było wiele drobnych szczegółów, które wymagały szczegółów specyfikacji. Jednym z najbardziej złożonych obszarów było opracowanie szczegółów scrollend na potrzeby widocznego obszaru wizualnego, a nie dokumentu. Weźmy na przykład stronę internetową, którą powiększasz. Po powiększeniu możesz przewijać dokument dookoła i nie musi to być przewijanie. Zapewniamy, że nawet ta wizualna interakcja przewijania z widocznym obszarem po zakończeniu wywoła zdarzenie scrollend.

Korzystanie z zdarzenia

Podobnie jak w przypadku innych zdarzeń przewijania możesz rejestrować 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
};

Polyfills i progresywne ulepszenia

Jeśli chcesz skorzystać z tego nowego wydarzenia, skorzystaj z tych porad. Możesz dalej korzystać z obecnej strategii zakończenia przewijania (jeśli ją masz) i na początku sprawdzić obsługę:

'onscrollend' in window
// true, if available

Przekazuje wartość prawda lub fałsz w zależności od tego, czy przeglądarka oferuje zdarzenie. Po sprawdzeniu możesz rozgałęzić kod:

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

To zdrowy początek, aby stopniowo ulepszać zdarzenie scrollend, gdy jest dostępne. Możesz też użyć polyfill (NPM), który działa najlepiej w przeglądarce:

import {scrollend} from "scrollyfills"

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

Jeśli jest to możliwe, kod polyfill będzie stopniowo korzystać z wbudowanego zdarzenia scrollend w przeglądarce. Jeśli jest niedostępny, skrypt monitoruje zdarzenia wskaźnika i przewija, aby jak najdokładniej oszacować zakończenie zdarzenia.

Przypadki użycia

Warto unikać ciężkiej pracy podczas przewijania. Dzięki temu przewijanie może wykorzystywać jak najwięcej pamięci i przetwarzania, aby zapewnić płynne działanie. Zdarzenie scrollend to idealny moment na wyróżnienie się i wykonanie ciężkiej pracy, ponieważ nie trzeba już przewijać strony.

Zdarzenie scrollend może służyć do wywoływania różnych działań. Typowym przypadkiem użycia jest synchronizacja powiązanych elementów interfejsu z pozycją, w której zatrzymano przewijanie. Na przykład: – Synchronizowanie pozycji przewijania karuzeli ze wskaźnikiem kropki. - Synchronizowanie elementu w galerii z jego metadanymi. - Pobieranie danych po przewinięciu przez użytkownika do nowej karty.

Wyobraź sobie sytuację, w której użytkownik odsuwa e-maila. Gdy użytkownik zakończy przesuwanie, możesz wykonać działanie w zależności od tego, gdzie użytkownik przewinął stronę.

Tego zdarzenia możesz też używać do synchronizacji po zautomatyzowaniu lub po przewinięciu przez użytkownika albo do wykonywania działań takich jak rejestrowanie statystyk.

Oto dobry przykład sytuacji, w której wiele elementów, takich jak strzałki, kropki czy zaznaczenie, wymaga aktualizacji w zależności od pozycji przewijania. Zobacz, jak stworzyłem karuzelę w YouTube Możesz też wypróbować prezentację na żywo.

Dziękuję Mehdi Kazemi za jego pracę inżynierską i Robertowi Flackowi, który udzielił wskazówek dotyczących interfejsu API i wdrażania.