Od wersji 129 przeglądarki Chrome możesz używać zdarzeń scrollSnapChange
i scrollSnapChanging
w JavaScript. Dzięki wdrożeniu wbudowanych zdarzeń snap wcześniej niewidoczny stan snapa będzie można wykorzystać w odpowiednim czasie i zawsze będzie on prawidłowy. Nie jest to wygoda, której nie miałeś/miałaś bez tych zdarzeń.
Przed wersją scrollSnapChange
można było użyć obserwatora przecięcia, aby sprawdzić, który element przecina obszar przewijania, ale określenie, co zostało przycięte, było możliwe tylko w niektórych okolicznościach. Możesz na przykład wykryć, czy elementy snap wypełniają port przewijania lub wypełniają większość portu przewijania. W tym celu obserwujesz elementy nakładające się na obszar przewijania, a potem, na podstawie tego, który element zajmuje większość obszaru przewijania, zakładasz, że jest to element do przyciągania. Następnie czekasz, aż scrollend
, i działasz na element do przyciągania (element docelowy).
Przed scrollSnapChanging
nie było jednak możliwe, aby dowiedzieć się, kiedy zmienia się cel przyciągania ani na co (np. w wyniku przewijania).
Mamy dobrą wiadomość: te nowe zdarzenia umożliwiają szybki i łatwy dostęp do tych informacji. Umożliwi to interakcje z przewijaniem, które wykraczają poza ich obecne możliwości, oraz umożliwi tworzenie relacji między przewijaniem a nowymi scenariuszami interakcji z UI.
scrollSnapChange
To zdarzenie jest wywoływane tylko wtedy, gdy gest przewijania spowodował zatrzymanie się na nowym docelowym elemencie dopasowania. Zdarzenie to jest wywoływane w następującej kolejności:
- Po odpoczynku koła.
- Do
scrollend
.
To zdarzenie jest wywoływane tuż przed scrollend
, gdy przewijanie jest zakończone, i tylko wtedy, gdy nowy cel wyrównania został wybrany. Dzięki temu zdarzenie jest wykonywane w sposób leniwy lub w samą porę, gdy gest przewijania zostanie zakończony.
scroller.addEventListener('scrollsnapchange', event => {
console.log(event.snapTargetBlock);
console.log(event.snapTargetInline);
})
scroller.onscrollsnapchange = event => {
console.log(event.snapTargetBlock);
console.log(event.snapTargetInline);
}
Zdarzenie udostępnia element przycięty w obiekcie zdarzenia jako snapTargetBlock
i snapTargetInline
. Jeśli suwak jest tylko poziomy, właściwość snapTargetBlock
będzie miała wartość null
. Wartością właściwości będzie węzeł elementu.
Unikalne szczegóły dla scrollSnapChange
Nie jest wywoływany, dopóki użytkownik nie zaniecha gestu.
Palec na ekranie lub palce na trackpadzie wskazują, że użytkownik nie zakończył przewijania, co oznacza, że przewijanie nie zostało zakończone, a co za tym idzie, że cel przyciągania nie został jeszcze zmieniony i czeka na zakończenie gestu.
Nie jest wywoływany, jeśli cel przyciągania nie uległ zmianie.
Zdarzenie to dotyczy zmiany przyciągania. Jeśli cel przyciągania się nie zmienił, zdarzenie nie zostanie wywołane, nawet jeśli użytkownik będzie używać suwaka. Użytkownik jednak przewijał stronę, więc po zakończeniu przewijania nadal wywołuje się zdarzenie scrollend
.
scrollSnapChanging
To zdarzenie jest wywoływane, gdy tylko przeglądarka stwierdzi, że gest przewijania spowodował lub spowoduje utworzenie nowego celu przyciągania. Jest ona wywoływana zbyt często i podczas przewijania.
scroller.addEventListener('scrollsnapchanging', event => {
console.log(event.snapTargetBlock);
console.log(event.snapTargetInline);
})
scroller.onscrollsnapchanging = event => {
console.log(event.snapTargetBlock);
console.log(event.snapTargetInline);
}
Zdarzenie udostępnia element przycięty w obiekcie zdarzenia jako snapTargetBlock
i snapTargetInline
. Jeśli suwak jest tylko pionowy, właściwość snapTargetInline
będzie miała wartość null
. Wartością właściwości będzie węzeł elementu.
Unikalne szczegóły dla scrollSnapChanging
Wyzwala się wcześnie i często podczas przewijania
W przeciwieństwie do zdarzenia scrollSnapChange
, które czeka na pełny gest przewijania przez użytkownika, to zdarzenie jest wywoływane natychmiast, gdy użytkownik przewija palcem lub za pomocą trackpada. Jeśli użytkownik przewija ekran powoli, nie podnosząc palca, scrollSnapChanging
zostanie wywołane kilka razy podczas wykonywania gestu, o ile użytkownik przesuwa palcem po wielu potencjalnych celach przyciągania. Za każdym razem, gdy użytkownik przewija stronę, jeśli przeglądarka określi, że po zwolnieniu kursor ma się zatrzymać na nowym elemencie dopasowania, uruchamia zdarzenie, aby poinformować, który to element.
nie uruchamia wszystkich celów snapa na drodze do nowego celu snapa;
Załóżmy też, że użytkownik wykonuje gest przewijania, który obejmuje kilka celów przyciągania naraz. Zdarzenie zostanie wywołane raz w przypadku celu, na którym użytkownik zatrzyma gest. Jest to więc chętne, ale nie marnujące zasobów, dostarczanie Ci jak najszybciej docelowego wyniku.
Przypadki użycia i przykłady
Te wydarzenia umożliwiają wiele nowych zastosowań, a także znacznie ułatwiają wdrażanie obecnych wzorców. Jednym z głównych przykładów jest włączenie animacji wywoływanej przez przypinanie. kontekstualne wyświetlanie elementu snapa, jego elementów podrzędnych lub powiązanych informacji, gdy jest on celem snapa;
Poniższe wzorce przedstawiają kilka przypadków użycia, które pomogą Ci od razu zwiększyć produktywność.
Wyróżnianie opinii
W tym przykładzie testimonial jest promowany lub skupia na sobie uwagę widza.
scroller.onscrollsnapchange = event => {
scroller.querySelector(':scope .snapped')?.classList.remove('snapped')
event.snapTargetInline.classList.add('snapped')
}
wyświetlać podpis do przypiętego elementu.
Ten przykład pokazuje podpis do przyciętego elementu. W tym pokazie demo uwzględniliśmy oba zdarzenia, aby pokazać różnice w czasie i wygodzie użytkowników między scrollSnapChange
a scrollSnapChanging
.
Animacja raz, elementy podrzędne przyciętego slajdu prezentacji
W tym przykładzie aplikacja wie, kiedy nowy slajd został wyświetlony i na nim zatrzymany, co jest świetnym momentem na animację treści.
document.addEventListener('scrollsnapchange', event => {
event.snapTargetBlock.classList.add('seen')
})
Przyciąganie do obu osi w scrollerze
Przyciąganie podczas przewijania działa w przypadku elementów, które umożliwiają przewijanie w poziomie i w pionie. Podczas przewijania siatki w tym demonstracji widoczne są zarówno wartości docelowe scrollSnapChanging
, jak i scrollSnapChange
. Ten pokaz demonstruje, że element, do którego przyciąga przeglądarkę, nie zawsze jest tym, za który go uważasz.
2 połączone suwaki
Ta prezentacja zawiera 2 kontenery z przeskakiwaniem po przewinięciu, z których jeden to ogólna lista linków, a drugi to właściwa treść strony. Nowe zdarzenie scrollSnapChanging
ułatwia łączenie stanów snapów w obie strony, dzięki czemu są one zawsze zsynchronizowane.
Selektor kolorów OKLCH
Ten pokaz zawiera 3 suwaki, z których każdy reprezentuje inny kanał kolorów w OKLCH. Element przycięty jest zsynchronizowany z odpowiednią grupą przełączników, a dane można pobrać z formularza otaczającego pola wejściowe. Użytkownik myszy lub ekranu dotykowego może przewinąć do wybranej wartości. Użytkownicy klawiatury mogą używać klawisza Tab i strzałek. Dla czytnika ekranu to tylko formularz.
Animowane wskaźniki z wyrównywaniem
W tym pokazie stopniowo ulepszamy działanie przewijania z automatycznym przeskakiwaniem za pomocą scrollsnapchange
.
Sprawdź obsługę zdarzeń za pomocą tego kodu JavaScript:
if ('onscrollsnapchange' in window) {
// ok to use snap change
}
Przewijany suwak
W tym pokazie zastosowano suwak jako alternatywną metodę wyboru długości dla danych liczbowych. Wpisz wartości bezpośrednio w polu tekstowym lub przewiń do rozmiaru. Zdarzenie zmiany służy do anulowania wyboru podczas wykonywania przez użytkownika gestu, a zdarzenie zmiany służy do aktualizowania stanu i potwierdzania wyboru użytkownika.
Proces wyboru okładki
Ta prezentacja opiera się na doskonałym odtworzeniu animacji przewijania przez Bramus Van Damme słynnego efektu cover flow w macOS (samouczek wideo). W tym przypadku element scrollSnapChanging
służy do ukrywania tytułu albumu, a element scrollSnapChange
– do wyświetlania tytułu. Te zdarzenia pomagają ukryć stary tytuł i pokazać nowy.
Więcej pomysłów na rozbudzenie kreatywności
Teraz, gdy łatwo jest określić, który element ma zostać przypięty i który jest aktywnie przypięty, masz do dyspozycji wiele nowych możliwości. Oto lista pomysłów, które mogą zainspirować Cię do kreatywności i dodatkowych zastosowań:
- uruchamianie ładowania opóźnionego, znanego jako renderowanie wywoływane przez zmianę lub pobieranie danych;
- Miniatury filmów połączone z większym obrazem
- Wstrzymywanie i odtwarzanie zwiastuna filmu w ramach przypiętej miniatury filmu.
- Śledzenie w Analytics
- Scrollytelling
- Wheel of Fortune UI/UX
- Cel przyciągania ma etykietkę z zaczepem.
- Kliknij, aby przypiąć
- Przytrzymaj, aby odsłonić
- Dźwięki przy przypinaniu
- Interfejs przesuwania
- karty lub karuzele, które można przewijać,
dalsze badania;
Zespół Chrome chętnie pozna Twoje opinie na temat nowych interfejsów API i ma nadzieję, że ułatwią Ci one korzystanie z przewijania.