Właściwość CSSInterakcja i inne
scroll-snap-type
Sprawia, że przewijany kontener zatrzymuje się na wybranych elementach.
- Wartość domyślna
none- Dziedziczona
- Nie
- Animowalna
- nie
- Dotyczy
- kontenery przewijania
- JavaScript
element.style.scrollSnapType = "x mandatory"
Przykład
#CSS
.carousel {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
}
.carousel > * {
flex: 0 0 80%;
scroll-snap-align: center;
}HTML przykładu
<div style="display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px;">
<div class="box" style="flex: 0 0 80%; height: 70px; scroll-snap-align: center;">Moduł 1</div>
<div class="box" style="flex: 0 0 80%; height: 70px; scroll-snap-align: center;">Moduł 2</div>
<div class="box" style="flex: 0 0 80%; height: 70px; scroll-snap-align: center;">Moduł 3</div>
</div>Podgląd
Definicja i zastosowanie
#Właściwość scroll-snap-type włącza przyciąganie przewijania w kontenerze. Po puszczeniu palca lub kółka przewijanie „dociąga” do najbliższego punktu przyciągania, zamiast zatrzymać się w przypadkowym miejscu.
Podajesz oś (x, y albo both) i siłę: mandatory zawsze dociąga do punktu, a proximity tylko wtedy, gdy przewinięcie zakończyło się blisko niego.
Punkty przyciągania ustawiasz na dzieciach właściwością scroll-snap-align. Tak buduje się karuzele i galerie bez JavaScriptu.
Składnia
#Składnia
scroll-snap-type: none | [ x | y | block | inline | both ] [ mandatory | proximity ]?;Wartości
#- Przewiń w bok: kontener zatrzymuje się w dowolnym miejscu.
- Przewiń w bok: zawsze dociąga do początku karty.
- Dociąga tylko, gdy zatrzymasz się blisko karty.
Wartości w praktyce
#none
Przewiń w bok: kontener zatrzymuje się w dowolnym miejscu.
.demo { scroll-snap-type: none; }x mandatory
Przewiń w bok: zawsze dociąga do początku karty.
.demo { scroll-snap-type: x mandatory; }x proximity
Dociąga tylko, gdy zatrzymasz się blisko karty.
.demo { scroll-snap-type: x proximity; }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Na telefonach karuzele z przyciąganiem są wygodniejsze niż te sterowane strzałkami.
- Przy
mandatoryupewnij się, że elementy nie są wyższe od kontenera, inaczej część treści będzie trudno dostępna.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.