Usuń funkcje limitu czasu i pozbądź się błędów. Oto zdarzenie, którego naprawdę potrzebujesz: Scrollend.
Przed zdarzeniem scrollend
nie było wiarygodnego sposobu wykrycia, że przewijanie
. Oznaczało to, że zdarzenia były wywoływane późno lub po naciśnięciu przez użytkownika palca
był nadal wyłączony na ekranie. Ten brak wiarygodności w informacjach o przewijaniu
doprowadziło do błędów i pogorszyło wrażenia użytkownika.
document.onscroll = event => { clearTimeout(window.scrollEndTimer) window.scrollEndTimer = setTimeout(callback, 100) }
Ta strategia (setTimeout()
) może najlepiej sprawdzić, czy przewijanie zostało zatrzymane
100ms
Sprawia to, że przewijanie jest wstrzymane, ale żaden
zakończone wydarzenie.
Po
scrollend
to przeglądarka robi za Ciebie tę trudną ocenę.
document.onscrollend = event => {…}
To jest dobre rozwiązanie. Z optymalnie wymierzonych w czasie i z wyjątkowymi warunkami przed emisją.
Wypróbuj
Szczegóły wydarzenia
Zdarzenie scrollend
jest uruchamiane, gdy:
- Przeglądarka nie animuje ani nie tłumaczy przewijania.
– Użytkownik został zwolniony.
– Wskaźnik użytkownika zwolnił kciuk przewijania.
- Naciśnięcie klawisza zostało zwolnione.
- Ukończono przewijanie do fragmentu.
- Udało się przewinąć ekran.
– zakończono zadanie scrollTo()
.
- Użytkownik przewinął widoczny obszar wizualny.
Zdarzenie scrollend
nie jest wywoływane, gdy:
– Gest użytkownika nie spowodował zmiany położenia przewijania (nie było tłumaczenia).
– Zapytanie scrollTo()
nie zwróciło żadnego tłumaczenia.
Opublikowanie tego zdarzenia na platformie internetowej trwało tak długo, ponieważ wiele osób
drobne szczegóły, które wymagają szczegółowych specyfikacji. Jeden z najbardziej złożonych obszarów
zdefiniowano scrollend
szczegóły dla widoku wizualnego
między dokumentem. Powiedzmy, że to strona internetowa, którą powiększasz. Możesz przewijać
w takim powiększeniu, a niekoniecznie
dokument. Zapewniam, że nawet w tym widocznym obszarze przewijanym przez użytkownika
Po zakończeniu interakcja będzie generować zdarzenie scrollend
.
Korzystanie z wydarzenia
Tak jak w przypadku innych zdarzeń przewijania, możesz zarejestrować 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
};
Polyfill i progresywne ulepszenie
Jeśli chcesz skorzystać z nowego wydarzenia już teraz, zapoznaj się z naszymi wskazówkami. Dostępne opcje nadal korzystać z obecnej strategii zakończenia przewijania (jeśli ją masz) oraz Na początku sprawdź pomoc:
'onscrollend' in window
// true, if available
W zależności od tego, czy przeglądarka obsługuje dane zdarzenie, wyświetli się wartość prawda lub fałsz. Na Po sprawdzeniu tej opcji 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 do stopniowego ulepszania zdarzenia scrollend
, gdy
jest dostępna. Możesz też wypróbować
kod polyfill
(NPM) Moje ustawienia działają najlepiej
przeglądarka może:
import {scrollend} from "scrollyfills"
// then use scrollend as if it's existed this whole time
document.onscrollend = callback
Kod polyfill będzie się stopniowo usprawniać, aby korzystać z wbudowanej przeglądarki scrollend
zdarzenia. Jeśli nie jest ona dostępna, skrypt monitoruje zdarzenia wskaźników oraz
przewiń, aby oszacować możliwość zakończenia zdarzenia.
Przypadki użycia
Zaleca się unikanie wykonywania zadań obliczeniowych podczas przewijania
co się dzieje. Dzięki temu przewijanie wykorzystuje tyle pamięci, ile trzeba,
aby wszystko działało płynnie. Używam zdarzenia scrollend
to idealny moment na wezwanie i ciężką pracę, ponieważ przewijanie
już nie będzie.
Zdarzenie scrollend
może służyć do wyzwalania różnych działań. Typowy przypadek użycia
synchronizuje powiązane elementy interfejsu z pozycją, w której przewija się
zatrzymano. Na przykład:
– Synchronizowanie pozycji przewijania w karuzeli ze wskaźnikiem kropki.
– Synchronizowanie elementu galerii z jego metadanymi.
– Pobieranie danych, gdy użytkownik przewinie stronę do nowej karty.
Wyobraź sobie sytuację, w której użytkownik usuwa e-maila. Po zakończeniu możesz więc wykonywać tę czynność na podstawie miejsca, do którego użytkownik przewinął stronę.
Tego zdarzenia możesz też użyć do synchronizacji po konwersji automatycznej lub dotyczącej użytkownika czy działań takich jak rejestrowanie statystyk.
Oto dobry przykład, w którym wiele elementów, takich jak strzałki, kropki i zaznaczenie, Trzeba zaktualizować na podstawie pozycji przewijania. Zobacz, jak utworzyłem tę karuzelę w YouTube Możesz też wypróbować wersję demonstracyjną na żywo.
Dziękujemy Mehdi Kazemim za pracę inżynierską nad tym zgłoszeniem oraz Robertowi Flackowi za pomoc w zakresie interfejsu API i wdrażania.