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. Brak pewności, kiedy przewijanie zostało zakończone, powodował błędy i niedogodności dla użytkowników.

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ę.100ms W ten sposób zdarzenie scroll has paused jest bardziej zbliżone do zdarzenia scroll has ended.

Po zdarzeniu scrollend przeglądarka wykonuje za Ciebie całą trudną analizę.

document.onscrollend = event => {…}

To jest to. Dokładnie zsynchronizowane i zawierające wiele istotnych warunków przed emisją.

Wypróbuj

Szczegóły wydarzenia

Zdarzenie scrollend jest wywoływane, gdy: - przeglądarka nie animuje ani nie przekształca przewijania. – użytkownik zwolnił dotyk. – wskaźnik użytkownika zwolnił suwak przewijania. – użytkownik zwolnił klawisz. – Przewijanie do fragmentu zostało zakończone. – Dopasowanie do przewijania zostało zakończone. – scrollTo() został ukończony. – 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.

Powodem, dla którego to wydarzenie tak długo nie było dostępne na platformie internetowej, było wiele drobnych szczegółów, które wymagały doprecyzowania. Jednym z najbardziej skomplikowanych obszarów było określenie szczegółów scrollend w kontekście wizualnego widoku w porównaniu z dokumentem. Weź pod uwagę stronę internetową, na której przybliżasz widok. W tym stanie powiększenia możesz przewijać, ale niekoniecznie 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ż 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

Zdarzenie zostanie zgłoszone jako Prawda lub Fałsz w zależności od tego, czy przeglądarka obsługuje to zdarzenie. 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, aby stopniowo ulepszać swoje wydarzenie scrollend, gdy będzie ono dostępne. Możesz też spróbować użyć 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

Rozszerzenie będzie stopniowo ulepszać obsługę wbudowanego zdarzenia scrollend w przypadku przeglądarki, jeśli jest ono dostępne. 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 wywoływania 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 za pomocą wskaźnika kropki. – Synchronizacja elementu galerii z jego metadanymi. – Pobieranie danych po tym, jak użytkownik przewinie do nowej karty.

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

Możesz też użyć tego zdarzenia do synchronizacji po przewinięciu strony przez użytkownika lub programowo albo do 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 ten autorskie 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.