W Chrome 129 można używać zdarzeń scrollSnapChange
i scrollSnapChanging
z JavaScriptu. Dzięki zaimplementowaniu wbudowanych zdarzeń przyciągania uwagę, która wcześniej była niewidoczna, w odpowiednim momencie stanie się aktywna i zawsze poprawna. Bez tych wydarzeń nie byłoby wygodniej.
Przed scrollSnapChange
można było używać obserwatora skrzyżowań, aby określić, który element przekracza port przewijania, ale ustalenie, co został przyciągnięty, było ograniczone do kilku okoliczności. Możesz na przykład wykryć, czy przyciągane elementy wypełniają port przewijania, czy większość. Obserwujesz przecinające się elementy obszaru przewijania. Następnie w zależności od tego, który element zajmuje większość obszaru przewijania, załóż, że chodzi o przyciąganie, a następnie poczekaj scrollend
i wykonaj czynności związane z przyciągniętym elementem (celem przyciągania).
Przed scrollSnapChanging
nie można było jednak dowiedzieć się, kiedy zmienia się cel przyciągania (np. w wyniku przesunięcia przewijania).
Widoczny jest poziomy pasek przewijania z ponumerowanymi polami wewnątrz elementów przyciągających. Po lewej stronie znajduje się dziennik zdarzeń ScrollSnapChange w czasie rzeczywistym z wyróżnionym niebieskim kolorem elementu clickTargetInline. Po prawej stronie znajduje się dziennik zdarzeń ScrollSnapZmienianie w czasie rzeczywistym z wyróżnionym szarym kolorem przyciągającym parametr clickTargetInline.
Mamy dobrą wiadomość – dzięki tym nowym wydarzeniom dostęp do tych informacji jest łatwy i szybki. Odblokowuje to interakcje z przyciąganiem przewijanym, aby wyjść poza ich obecne możliwości i umożliwia administrowanie relacjami typu przewijanie i nowymi scenariuszami dotyczącymi opinii w interfejsie.
scrollSnapChange
To zdarzenie jest wywoływane tylko wtedy, gdy gest przewijania doprowadził do tego, że został na nim osadzony nowy przyciągany cel, i w poniższej kolejności
- Po spokoju przewijania.
- Przed
scrollend
.
To zdarzenie uruchamia się tuż przed scrollend
, po zakończeniu przewijania, i tylko wtedy, gdy na podstawie nowego elementu przyciągasz uwagę. Dzięki temu po wykonaniu gestu przewijania wydarzenie wydaje się leniwe lub niemal momentowe.
scroller.addEventListener('scrollsnapchange', event => {
console.log(event.snapTargetBlock);
console.log(event.snapTargetInline);
})
scroller.onscrollsnapchange = event => {
console.log(event.snapTargetBlock);
console.log(event.snapTargetInline);
}
Zdarzenie ujawnia przyciągnięty element w obiekcie zdarzenia jako snapTargetBlock
i snapTargetInline
. Jeśli pasek przewijania znajduje się tylko w poziomie, właściwość snapTargetBlock
ma wartość null
. Wartością właściwości będzie węzeł elementu.
Unikalne szczegóły dotyczące przewijania SnapChange
Nie uruchamia się, dopóki użytkownik nie zwolni gestu
Palec pozostaje na ekranie lub palce na trackpadzie, co oznacza, że gest użytkownika nie został ukończony. Przewijanie nie zostało zakończone, co oznacza, że cel przyciągania jeszcze się nie zmienił i oczekuje na pełny gest użytkownika.
Nie uruchamia się, jeśli cel przyciągania się nie zmienił
Zdarzenie służy do zmiany przyciągania. Jeśli element przyciągania nie uległ zmianie, zdarzenie nie uruchomi się, nawet jeśli użytkownik wszedł w interakcję z elementem przewijania. Użytkownik jednak przewinął stronę, więc po zakończeniu przewijania zdarzenie scrollend
nadal uruchamia się.
scrollSnapChanging
To zdarzenie jest wywoływane, gdy tylko przeglądarka określi, że gest przewijania ma lub spowoduje utworzenie nowego elementu przyciągającego. Uruchamia się szybko 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 ujawnia przyciągnięty element w obiekcie zdarzenia jako snapTargetBlock
i snapTargetInline
. Jeśli pasek przewijania jest ustawiony tylko w pionie, właściwość snapTargetInline
ma wartość null
. Wartością właściwości będzie węzeł elementu.
Unikalne szczegóły dotyczące przewijania Snapshift
Uruchamia się wcześnie i często podczas gestu przewijania
W przeciwieństwie do funkcji scrollSnapChange
, która czeka na wykonanie przez użytkownika gestu przewijania, to zdarzenie uruchamia się z zapasem, gdy użytkownik przewija ekran palcem lub używa trackpada. Weźmy pod uwagę użytkownika, który powoli przewija ekran bez kiwnięcia palcem. Polecenie scrollSnapChanging
zostanie uruchomione kilka razy podczas gestu, o ile użytkownik przesuwa widok nad kilka potencjalnych elementów przyciągających uwagę. Za każdym razem, gdy użytkownik przewija stronę, a przeglądarka ustali, że po zwolnieniu zostanie umieszczona na nowym elemencie przyciągającym, uruchamia się zdarzenie, aby poinformować Cię, który element to jest.
Nie uruchamia wszystkich elementów przyciągających na drodze do nowego.
Warto też rozważyć rzut, w ramach którego użytkownik wykonuje gest przewijania, który obejmuje wiele elementów przyciągania naraz. to zdarzenie zostanie uruchomione jednorazowo z celem, na którym zostanie nałożony reakcja. Możesz więc szybko zdobyć cel, ale nie marnować czasu.
Przypadki użycia i przykłady
Zdarzenia te umożliwiają zastosowanie wielu nowych zdarzeń, a jednocześnie ułatwiają wdrożenie obecnych wzorców. Doskonałym przykładem jest włączenie animacji uruchamianej przez przyciąganie. Kontekstowe ujawnienie elementu przyciągania, jego elementów podrzędnych lub powiązanych informacji, gdy jest on elementem przyciągającym.
Poniższe wzorce przedstawiają niektóre przypadki użycia, które pozwalają od razu zwiększyć produktywność.
Wyróżnij opinię
Ten przykład promuje lub wyróżnia wizualnie skopiowaną opinię.
scroller.onscrollsnapchange = event => {
scroller.querySelector(':scope .snapped')?.classList.remove('snapped')
event.snapTargetInline.classList.add('snapped')
}
Pokaż podpis do przyciągniętego elementu
Ten przykład pokazuje podpis do przyciągniętego elementu. Ta wersja demonstracyjna obejmuje oba wydarzenia, więc możesz zobaczyć różnice w czasie i wrażeniach użytkowników między scrollSnapChange
a scrollSnapChanging
.
Przyciąg zmienia się
https://codepen.io/web-dot-dev/pen/wvLPPBL
Przyciągnij zmianę
https://codepen.io/web-dot-dev/pen/QWXOObw
Animowana animacja elementów podrzędnych slajdu prezentacji
W tym przykładzie widać, kiedy nowy slajd został wylądowany i położony na nim, co jest świetnym sposobem na jednokrotne animowanie zawartości.
document.addEventListener('scrollsnapchange', event => {
event.snapTargetBlock.classList.add('seen')
})
Przyciąganie zarówno osi x, jak i y w komponencie przewijania
Przyciąganie po przewinięciu działa w przypadku przewijających, które umożliwiają przewijanie w poziomie i pionie. Ta wersja demonstracyjna pokazuje cele scrollSnapChanging
i scrollSnapChange
podczas przewijania siatki. Ta wersja demonstracyjna pokaże Ci, że element, do którego przyciąga przeglądarka, nie zawsze musi być tym, na czym Ci zależy.
Widoczna jest siatka kwadratów w przewijaniu poziomym i pionowym. Obramowanie przerywane z przekształcania reprezentuje cel ScrollSnapChange, a ciągłe obramowanie to cel ScrollSnapChange. Czerwony oznacza element capTargetInline, a niebieski –SnapTargetBlock.
2 połączone przewijarki
Ta wersja demonstracyjna zawiera 2 kontenery z przyciąganiem do przewijania, z których jeden to ogólna lista linków, a drugi to rzeczywista zawartość strony. Nowe zdarzenie scrollSnapChanging
ułatwia dwukierunkowe połączenie stanów zrzutu, aby zawsze były zsynchronizowane.
Selektor kolorów OKLCH
Ta wersja demonstracyjna zawiera 3 przewijaki, z których każdy reprezentuje inny kanał kolorów w języku OKLCH. Przyciągnięty element jest zsynchronizowany z odpowiednią grupą opcji, a dane można pobrać z formularza obejmującego dane wejściowe. Aby wybrać użytkownika myszy lub użytkownika dotykowego, możesz przewinąć do odpowiedniej wartości. Jeśli używasz klawiatury, możesz używać klawisza Tab i używać klawiszy strzałek. W przypadku czytnika ekranu jest to tylko formularz.
ScrollSnapZmienianie służy do szybkiego synchronizowania przyciągniętego elementu ze stanem, a scrollSnapChange do animowania nagłówka kanału kolorów, do którego zastosowano dane wejściowe użytkownika.
https://codepen.io/web-dot-dev/pen/OJeOOVGPrzyciąganie niesamowitych animowanych centrów
Ta wersja demonstracyjna stopniowo ulepsza przyciąganie przewijania za pomocą przejść w trybie przyciągania wywoływanym przez interfejs scrollsnapchange
.
Aby sprawdzić obsługę zdarzeń, użyj tego kodu JavaScript:
if ('onscrollsnapchange' in window) {
// ok to use snap change
}
Dane wejściowe z przewijaną linijką
Ta wersja demonstracyjna zawiera przewijaną linijkę, która pozwala wybrać długość tekstu na potrzeby wpisywania liczb. Wpisz wartości bezpośrednio w polu tekstowym lub przewiń do odpowiedniego rozmiaru. Zdarzenie zmiany służy do usuwania zaznaczenia podczas wykonywania gestu użytkownika, a zdarzenie zmiany służy do aktualizowania stanu i potwierdzania wyboru użytkownika.
Rodzaj osłony
Ta wersja demonstracyjna opiera się na doskonałej animacji Bramusa Van Damme'a opartej na przewijaniu znanej z okładki filmu w systemie macOS (także samouczek wideo). Tag scrollSnapChanging
służy do ukrywania tytułu albumu, a scrollSnapChange
do jego prezentowania. Dzięki wydarzeniom możemy z góry zaopiekować się starym tytułem i leniwą prezentacją nowego.
Więcej pomysłów, które pobudzają kreatywność
Teraz gdy łatwo jest określić, który element zostanie przyciągany, a który aktywnie, jest wiele nowych możliwości. Oto lista pomysłów, które pobudzają kreatywność, oraz dodatkowe przypadki użycia:
- włączenie leniwego ładowania, znanego jako renderowanie wyzwalane przez funkcję przyciągania zmian lub pobieranie danych;
- Miniatury klatki filmu połączone z większym obrazem.
- Włączanie i wyłączanie odtwarzania zwiastuna w celu utworzenia miniatury filmu.
- Śledzenie Analytics
- Przewijanie
- Koło fortune – UI/UX
- Cel przyciągania otrzymuje zakotwiczoną etykietkę.
- Kliknij, aby zrobić zdjęcie
- Przyciągnij, aby pokazać
- Dźwięk przy uchu
- Interfejs przesuwania
- Przesuwane karty lub karuzele
Dalsze badania
Zespół Chrome z chęcią pozna, co tworzycie za pomocą tych nowych interfejsów API. Mamy nadzieję, że pomogą one usprawnić przewijanie treści.