Przewiń zdarzenia przyciągania

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).

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

1. Po spokoju przewijania.
2. 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.

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.

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.

Przycią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.

Zasoby:

• Specyfikacja CSS
• Objaśnienia dotyczące Window Snap
• Kolekcja CodePen