W Chrome 129 można używać zdarzeń scrollSnapChange i scrollSnapChanging z JavaScriptu. Dzięki wdrożeniu wbudowanych zdarzeń przyciągania stanie się on niewidoczny we właściwym czasie i będzie zawsze prawidłowy. 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ść przewijanego obszaru, załóżmy, że cel przyciągania to scrollend, i zaczekaj, aż element zostanie przyciągany (cel 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 elementu 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 element, i w poniższej kolejności
- Po spokoju przewijania.
- Przed
scrollend.
To zdarzenie jest wywoływane tuż przed scrollend, po zakończeniu przewijania, i tylko wtedy, gdy został utworzony nowy cel przyciągania. Dzięki temu po wykonaniu gestu przewijania wydarzenie może się wydawać leniwe, a w trakcie przewijania nie musi się nudzić.
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ł zakończony przewijaniem, co oznacza, że przewijanie jeszcze się nie zakończyło. To 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 – przycisk scrollSnapChanging uruchomi się wiele 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 przewinie 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łcaniem 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 generowanym za pomocą interfejsu 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.