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ś 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 punktami 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 spokoju przewijania.
Przed 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 ujawnia przyciągnięty element 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 zakończy 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 punkt zaczepienia nie został jeszcze zmieniony i czeka na dokończenie gestu.

Nie jest wywoływany, jeśli cel przyciągania się nie zmienił.

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 określi, że gest przewijania ma lub spowoduje utworzenie nowego elementu przyciągającego. 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 ujawnia przyciągnięty element 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 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. 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 łączenia. Za każdym razem, gdy użytkownik przewinie stronę, a przeglądarka ustali, że po zwolnieniu będzie spoczywać na nowym elemencie docelowym, uruchamia się zdarzenie, aby poinformować Cię, który element to jest.

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.

Zastosowania i przykłady

Te zdarzenia umożliwiają wiele nowych zastosowań, a także znacznie ułatwiają wdrażanie obecnych wzorców. Doskonałym przykładem jest włączenie animacji uruchamianej przez przyciąganie. kontekstualne wyświetlanie elementu snapa, jego elementów podrzędnych lub powiązanych informacji, gdy jest on celem snapa;

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

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

Pokaż podpis do przycię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

Przyciągnij zmianę
https://codepen.io/web-dot-dev/pen/QWXOObw

Animacja raz, elementy podrzędne sformatowanego 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. Ta wersja demonstracyjna pokazuje cele scrollSnapChanging i scrollSnapChange podczas przewijania siatki. Ten pokaz demonstruje, że element, do którego przyciąga przeglądarkę, nie zawsze jest tym, za który go uważasz.

Widoczna jest siatka kwadratów w przewijaniu poziomym i pionowym. 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 przewijarki

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

W tym pokazie są 3 suwaki, z których każdy reprezentuje inny kanał kolorów w OKLCH. Element przycięty jest zsynchronizowany z odpowiednią grupą radiową, 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ą korzystać z 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

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
}

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

Dane wejściowe z przewijaną linijką

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

Rodzaj osłony

Ta wersja demonstracyjna opiera się na doskonałej, opartej na przewijaniu animacji Barda Van Damme'a przedstawiającej proces przewijania okładki w systemie macOS (także 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ń:

włączanie leniwego ładowania, czyli renderowania wyzwalanego przez przyciąganie zmian lub pobierania danych;
Miniatury filmów połączone z większym obrazem
Wstrzymywanie i odtwarzanie zwiastunów filmów w przypiętej miniaturze.
Śledzenie Analytics
Przewijanie
Koło fortune – UI/UX
Cel przyciągania ma zakotwiczone pole z etykietą.
Kliknij, aby przypiąć
Przytrzymaj, aby odsłonić
Dźwięk przy uchu
Interfejs przesuwania
karty lub karuzele, które można przesuwać,

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.