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 na wykrycie, że przewijanie zostało zakończone. Oznaczało to, że zdarzenia były uruchamiane z opóźnieniem lub gdy palec użytkownika nadal znajdował się na ekranie. Ta niepewność co do tego, kiedy przewijanie się zakończyło, prowadziła do błędów i pogorszenia wrażeń 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 zostało zatrzymane na 100ms. Dzięki temu zdarzenie jest bardziej podobne do zdarzenia wstrzymania przewijania, a nie zdarzenia zakończenia przewijania.

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

Po

document.onscrollend = event => {…}

To jest to! Są idealnie zsynchronizowane i zawierają wiele istotnych warunków, zanim zostaną wyemitowane.

Browser Support

• 114
• 114
• 109
• 26.2

Source

Wypróbuj

Szczegóły wydarzenia

Zdarzenie scrollend jest wywoływane, gdy: – przeglądarka nie animuje już ani nie tłumaczy przewijania, – użytkownik przestał dotykać ekranu. - Wskaźnik użytkownika zwolnił suwak przewijania. - Użytkownik zwolnił klawisz. – Przewijanie do fragmentu zostało zakończone. – Przewijanie z przyciąganiem zostało zakończone. – scrollTo() została ukończona. – 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 spowodowało żadnego tłumaczenia.

Jednym z powodów, dla których tak długo trwało wprowadzenie tego wydarzenia na platformę internetową, było wiele drobnych szczegółów, które wymagały doprecyzowania. Jednym z najbardziej złożonych obszarów było określenie szczegółów scrollend dla wizualnego obszaru wyświetlania w porównaniu z dokumentem. Wyobraź sobie stronę internetową, którą powiększasz. W tym powiększonym stanie możesz przewijać, ale niekoniecznie przewijasz dokument. Możesz mieć pewność, że nawet to przewijanie przez użytkownika w obszarze widocznego ekranu wygeneruje zdarzenie scrollend po zakończeniu.

Korzystanie ze zdarzenia

Podobnie jak w przypadku innych zdarzeń przewijania, detektory możesz rejestrować na kilka sposobów.

addEventListener("scrollend",> (event) = {
  // scroll ended
});

aScrollingElement.addEventListener("scroll>end", (event) = {
  // scroll ended
});

lub użyj właściwości zdarzenia:

document.onscrollend = (event) => {
  // scroll ended
};

aScrollingElement.onscrollend = (event) => {
  // scroll ended
};

Kod polyfill i progresywne ulepszanie

Jeśli chcesz już teraz skorzystać z tego nowego zdarzenia, zapoznaj się z naszymi wskazówkami. Możesz nadal używać obecnej strategii przewijania do końca (jeśli ją masz), a na jej początku sprawdzić obsługę za pomocą:

'onscrollend' in window
// true, if available

Zwróci on wartość „true” lub „false” w zależności od tego, czy przeglądarka obsługuje to zdarzenie. Dzięki temu 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 dobry początek progresywnego ulepszania zdarzenia scrollend, gdy jest ono dostępne. Możesz też wypróbować polyfill (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

Polyfill będzie stopniowo ulepszany, aby korzystać z wbudowanego zdarzenia scrollend przeglądarki, jeśli jest dostępne. Jeśli nie jest dostępny, skrypt obserwuje zdarzenia wskaźnika i przewijanie, 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łynnego działania. Zdarzenie scrollend to idealny moment na wywołanie i wykonanie ciężkiej pracy, ponieważ przewijanie już się nie odbywa.

Zdarzenie scrollend może służyć do wywoływania różnych działań. Typowym 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 kropkowym. – 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 e-maila, aby go usunąć. Po zakończeniu przesuwania możesz wykonać działanie na podstawie miejsca, do którego użytkownik przewinął.

Możesz też użyć tego zdarzenia do synchronizacji po przewinięciu przez program lub użytkownika albo po wykonaniu działań takich jak rejestrowanie statystyk.

Oto dobry przykład, w którym wiele elementów, takich jak strzałki, kropki i fokus, musi być aktualizowanych na podstawie pozycji przewijania. Obejrzyj film o tym, jak utworzyć tę karuzelę na YouTube Możesz też wypróbować wersję demonstracyjną.

Dziękujemy Mehdiemu Kazemiemu za pracę nad tym rozwiązaniem oraz Robertowi Flackowi za wskazówki dotyczące interfejsu API i wdrożenia.