Dziękujemy za zainteresowanie konferencją Google I/O. Oglądanie treści na żądanie.

Ta strona została przetłumaczona przez Cloud Translation API.

Przewiń zdarzenia przyciągania

Adam Argyle

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

Obsługa przeglądarek

Źródło

Obsługa przeglądarek

Źródło

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

Wyświetla się suwak poziomy z numerowanymi polami jako punkty doklejania. Po lewej stronie znajduje się dziennik zdarzeń scrollSnapChange w czasie rzeczywistym, w którym niebieski kolor wyróżnia snapTargetInline. Po prawej stronie znajduje się dziennik zdarzeń scrollSnapChanging w czasie rzeczywistym, w którym wyróżniono na szaro element snapTargetInline.

Wypróbuj
https://codepen.io/web-dot-dev/pen/jOjaaEP

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')
}

https://codepen.io/web-dot-dev/pen/dyBZZPe

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.

Zrzut Zmiana
https://codepen.io/web-dot-dev/pen/wvLPPBL

Snap Change
https://codepen.io/web-dot-dev/pen/QWXOObw

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')
})

https://codepen.io/web-dot-dev/pen/rNEYYVj

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.

Widnieje siatkowa siatka kwadratów, którą można przewijać poziomo i pionowo. Przerywana ramka oznacza cel scrollSnapChanging, a ciągła – cel scrollSnapChange. Czerwony kolor oznacza snapTargetInline, a niebieski – snapTargetBlock.

https://codepen.io/web-dot-dev/pen/qBzVVdp

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.

https://codepen.io/web-dot-dev/pen/YzoEEXj

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.

scrollSnapChanging służy do szybkiej synchronizacji zablokowanego elementu ze stanem, a scrollSnapChange służy do animowania nagłówka kanału kolorów, do którego zastosowano dane wejściowe użytkownika.

https://codepen.io/web-dot-dev/pen/OJeOOVG

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
}

https://codepen.io/web-dot-dev/pen/MWMOOae

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.

https://codepen.io/web-dot-dev/pen/LYKOOpd

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.

https://codepen.io/web-dot-dev/pen/Bagmmog

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.