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 się zakończyło, powodował błędy i niedogodności dla użytkowników.

Przed

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ą ocenę.

Po

document.onscrollend = event => {…}

To jest to. Dokładnie dopasowane czasowo i zawierające wiele istotnych warunków.

Obsługa przeglądarek

• 114
• 114
• 109
• x

Źródło

Wypróbuj

Szczegóły wydarzenia

Zdarzenie scrollend jest wywoływane, gdy: – przeglądarka nie animuje ani nie tłumaczy przewijania. – użytkownik zwolnił dotyk. – wskaźnik użytkownika zwolnił suwak przewijania. – użytkownik zwolnił klawisz. – Przewijanie do fragmentu zostało zakończone. - Operacja przewijania została zakończona. – ukończono: scrollTo(). – 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. Powiedzmy, że to strona internetowa, którą powiększasz. W tym stanie powiększenia możesz przewijać, ale niekoniecznie przewija to dokument. Zapewniam, że nawet ta interakcja przewijania w widocznym obszarze, która jest wywoływana przez użytkownika, po zakończeniu spowoduje wygenerowanie zdarzenia scrollend.

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
};

Polyfill i progresywne ulepszenie

Jeśli chcesz już teraz 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

Zwraca on wartość 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ż 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 dostępny, skrypt śledzi zdarzenia związane z wskaźnikiem i przewijaniem, aby jak najlepiej oszacować czas zakończenia zdarzenia.

Przypadki użycia

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 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 z wskaźnikiem kropki. – Synchronizowanie 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ął.

Zdarzenia tego typu możesz też używać do synchronizowania po przewinięciu strony przez użytkownika lub automatycznie, a także do wykonywania takich działań 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 pokaz slajdów 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.