CSS scroll snap: karuzele, sekcje pełnoekranowe i plac zabaw na żywo
Wypróbuj każdą wartość scroll-snap-type, scroll-snap-align i scroll-snap-stop w działającym podglądzie, a potem skopiuj karuzelę w czystym CSS i sekcje pełnoekranowe, które pozostają dostępne.
Scroll snap sprawia, że przewijane pole zatrzymuje się na wybranych elementach podrzędnych, a nie w dowolnym miejscu. Ustaw scroll-snap-type: x mandatory (albo y, albo proximity) na kontenerze przewijania, a potem scroll-snap-align: start, center lub end na każdym elemencie podrzędnym. Dodaj scroll-padding dla stałych headerów i scroll-snap-stop: always, aby zatrzymywać się na każdym elemencie.
Właściwości scroll snap w skrócie
Właściwość
Ustawiana na
Wartości
Kontenerze przewijania
none, x, y, block, inline, both + mandatory lub proximity
Każdym elemencie podrzędnym
none, start, center, end (jedna lub dwie wartości)
Każdym elemencie podrzędnym
normal (może przeskoczyć), always (musi się zatrzymać)
Kontenerze przewijania
Wcięcie w długości lub procentach, jak padding
Każdym elemencie podrzędnym
Odstęp w długości wokół obszaru przyciągania
Scroll snap kiedyś wymagał biblioteki do karuzel. Dziś kilka linii CSS daje Ci przesuwane karty, galerię ze stronami lub sekcje pełnoekranowe, a przewijanie z bezwładnością i obsługę klawiatury załatwia przeglądarka. Użyj placu zabaw, aby poczuć różnicę między każdą wartością, zanim skopiujesz jakikolwiek kod.
Wybierz w placu zabaw oś i rygor przyciągania dla kontenera.
Wybierz, jak wyrównuje się każdy slajd i czy przewijanie musi zatrzymać się na każdym slajdzie.
Przewijaj podgląd gładzikiem, kółkiem myszy, dotykiem lub klawiszami strzałek po kliknięciu w niego.
Skopiuj wygenerowany CSS albo weź jeden z kompletnych wzorców poniżej.
Gdy podasz oś bez słowa kluczowego rygoru, używane jest proximity.
Przy długiej treści wybieraj proximity: mandatory może uwięzić czytelników, gdy element podrzędny jest wyższy niż kontener.
Spraw, by element przewijany mógł otrzymać fokus przez tabindex="0" i dostępną nazwę, aby użytkownicy klawiatury mogli przewijać go strzałkami.
Przyciąganie działa z scrollIntoView() i linkami do kotwic, więc zwykłe przyciski następny i poprzedni mogą sterować karuzelą.
Najczęściej zadawane pytania
Czym różni się mandatory od proximity?
Przy mandatory kontener zawsze zatrzymuje się na pozycji przyciągania, gdy przewijanie się kończy. Przy proximity przyciąga tylko wtedy, gdy przewijanie kończy się blisko takiej pozycji, co pozwala ludziom swobodnie czytać pomiędzy. proximity jest domyślne, gdy podajesz tylko oś.
Dlaczego scroll snap nie działa?
Typowe przyczyny to: scroll-snap-type jest na elementach podrzędnych zamiast na przewijanym rodzicu, rodzic tak naprawdę się nie przelewa (ustaw overflow-x: auto i stały rozmiar) albo elementy podrzędne nie mają scroll-snap-align. Przy przyciąganiu na poziomie strony kontenerem jest html, a nie body.
Jak sprawić, by stały header nie zasłaniał przyciąganych sekcji?
Ustaw scroll-padding-top na kontenerze przewijania równe wysokości headera, na przykład html { scroll-padding-top: 64px; }. Przyciągane sekcje i skoki do kotwic zatrzymują się wtedy pod headerem, a nie za nim.
Czy mogę zbudować karuzelę bez JavaScript?
Tak, jeśli chodzi o przesuwanie i przewijanie: wiersz flex z overflow-x: auto i przyciąganiem x mandatory to działająca karuzela. Kropki pokazujące bieżący slajd, autoodtwarzanie i zapętlenie nadal wymagają odrobiny skryptu.
Czy CSS scroll snap jest obsługiwany wszędzie?
scroll-snap-type ma status Baseline widely available od 2022 roku w Chrome, Edge, Firefox i Safari, a scroll-snap-stop od lipca 2022. Możesz go używać bez rozwiązania awaryjnego: przeglądarki bez obsługi po prostu przewijają swobodnie.
Karuzele, z których da się naprawdę korzystać
Pozwól następnej karcie wystawać, robiąc każdy slajd węższy niż kontener, na przykład flex: 0 0 85%. Widoczna krawędź mówi ludziom, że jest więcej do przesunięcia, czego idealnie dopasowany slajd nie robi.
Nadaj elementowi przewijanemu etykietę, taką jak aria-label="Customer photos", i trzymaj slajdy jako listę. Nie ukrywaj slajdów spoza ekranu przed czytnikami ekranu i nigdy nie włączaj autoodtwarzania bez przycisku pauzy.
Sekcje pełnoekranowe bez pułapki
Przyciąganie na pełną wysokość robi wrażenie w demie i irytuje czytelników, gdy jedna sekcja ma więcej tekstu, niż mieści ekran, bo przyciąganie mandatory ciągle przerzuca ich dalej. Dla sekcji strony używaj proximity albo upewnij się, że każda sekcja naprawdę mieści się na ekranie telefonu.
Szanuj ograniczony ruch, wyłączając scroll-behavior: smooth wewnątrz zapytania prefers-reduced-motion: reduce. Samo przyciąganie można zostawić, bo przesuwa tylko tak daleko, jak poprosił czytelnik.
Karuzela kart w czystym CSS
Pozioma karuzela z wystającą następną kartą
Przesuń palcem, przewiń w bok lub kliknij w środku i użyj klawiszy strzałek. Każda karta ma 80 procent szerokości, więc następną widać przy krawędzi.
Sekcje pełnoekranowe
Pionowe sekcje przyciągane pod stałym headerem
Przyciąganie jest na html, czyli elemencie przewijającym stronę. scroll-padding-top trzyma sekcje z dala od headera o wysokości 64px, a proximity zapobiega uwięzieniu w długich sekcjach.
Przyciski następny i poprzedni
Sterowanie karuzelą przez scrollBy
Przeglądarka kończy ruch na najbliższym punkcie przyciągania, więc przewinięcie o szerokość jednej karty trafia dokładnie na następną kartę.
Plac zabaw scroll snap
Oś
Rygor
Wyrównanie slajdu
Zatrzymuj się na każdym slajdzie
Podgląd scroll snap, przewiń lub użyj klawiszy strzałek