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 wprowadzeniem zdarzenia scrollend nie było niezawodnego sposobu wykrywania zakończenia przewijania. Oznaczało to, że zdarzenia były wywoływane z opóźnieniem lub gdy palec użytkownika nadal dotykał ekranu. Ta niepewność co do tego, kiedy przewijanie faktycznie się zakończyło, prowadziła do błędów i negatywnie wpływała na wrażenia użytkowników.

Przed

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

Najlepsze, co może zrobić ta strategia setTimeout(), to sprawdzić, czy przewijanie zatrzymało się na 100ms. Dzięki temu zdarzenie przypomina bardziej zdarzenie wstrzymania przewijania niż zdarzenie zakończenia przewijania.

Po scrollendzdarzeniu przeglądarka przeprowadza za Ciebie całą tę trudną ocenę.

Po

document.onscrollend = event => {…}

To jest to. Idealnie dopasowane i zawierające wiele istotnych warunków przed emisją.

Browser Support

• 114
• 114
• 109
• 

Source

Wypróbuj

Szczegóły wydarzenia

Zdarzenie scrollend jest wywoływane, gdy: - przeglądarka nie animuje już przewijania ani nie tłumaczy go; – użytkownik przestał dotykać ekranu; – Użytkownik zwolnił wskaźnik z suwaka przewijania. – Użytkownik zwolnił klawisz. – Przewijanie do fragmentu zostało zakończone. – Przewijanie z przyciąganiem zostało zakończone. – scrollTo() zostało ukończone. – użytkownik przewinął widoczny obszar;

Zdarzenie scrollend nie jest wywoływane, gdy:<ul><li>gest użytkownika nie spowodował żadnych zmian w położeniu przewijania (nie nastąpiło przesunięcie); – scrollTo() nie dało żadnego tłumaczenia.

Powodem, dla którego to zdarzenie tak długo nie pojawiało się na platformie internetowej, było wiele drobnych szczegółów, które wymagały doprecyzowania. Jednym z najbardziej złożonych obszarów było określenie scrollend szczegółów dotyczących widocznego obszaru w porównaniu z dokumentem. Wyobraź sobie stronę internetową, którą powiększasz. W tym stanie powiększenia możesz przewijać widok, ale niekoniecznie przewijasz dokument. Możesz mieć pewność, że nawet ta interakcja przewijania wywołana przez użytkownika w wizualnym obszarze wyświetlania wyemituje zdarzenie scrollend po zakończeniu.

Korzystanie ze zdarzenia

Podobnie jak w przypadku innych zdarzeń przewijania, możesz zarejestrować odbiorców 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 ulepszanie

Jeśli chcesz teraz użyć tego nowego zdarzenia, skorzystaj z naszych wskazówek. Możesz nadal korzystać z obecnej strategii zakończenia przewijania (jeśli ją masz) i na jej początku sprawdzać obsługę za pomocą tego kodu:

'onscrollend' in window
// true, if available

Zwróci ona wartość „prawda” lub „fałsz” w zależności od tego, czy przeglądarka obsługuje to zdarzenie. Dzięki temu sprawdzeniu 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, aby stopniowo ulepszać wydarzenie scrollend, gdy będzie to możliwe. Możesz też wypróbować polyfill (NPM), który zrobi wszystko, co w mocy przeglądarki:

import {scrollend} from "scrollyfills"

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

Wypełnienie będzie stopniowo ulepszane, aby w razie potrzeby korzystać z wbudowanego w przeglądarkę scrollendzdarzenia. Jeśli nie jest dostępny, skrypt obserwuje zdarzenia wskaźnika i przewija, aby jak najlepiej oszacować zakończenie zdarzenia.

Przypadki użycia

Podczas przewijania warto unikać zadań wymagających dużej mocy obliczeniowej. Dzięki temu przewijanie może wykorzystywać tyle pamięci i mocy obliczeniowej, ile jest potrzebne do zapewnienia płynności. Użycie zdarzenia scrollend to idealny moment na zwrócenie uwagi użytkownika i wykonanie złożonych działań, ponieważ przewijanie już się nie odbywa.

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

Wyobraź sobie sytuację, w której użytkownik przesuwa palcem, aby odrzucić e-maila. Gdy użytkownik skończy przesuwać palcem, możesz wykonać działanie w zależności od tego, gdzie przewinął ekran.

Możesz też używać tego zdarzenia do synchronizacji po przewijaniu przez użytkownika lub w sposób automatyczny albo do działań takich jak rejestrowanie danych analitycznych.

Oto dobry przykład, w którym wiele elementów, takich jak strzałki, kropki i fokus, musi być aktualizowanych w zależności od pozycji przewijania. Zobacz, jak powstała ta karuzela w YouTube Możesz też wypróbować wersję demonstracyjną.

Dziękujemy Mehdiemu Kazemiemu za pracę inżynieryjną nad tym projektem oraz Robertowi Flackowi za wskazówki dotyczące interfejsu API i wdrażania.