Scroll-snap-align - CSS-Tricks

Anonim

scroll-snap-alignjest częścią modułu CSS Scroll Snap Module. Przyciąganie do przewijania odnosi się do „blokowania” pozycji rzutni do określonych elementów na stronie podczas przewijania okna (lub przewijanego kontenera). Pomyśl o kontenerze z funkcją przechwytywania przewijania, jak o umieszczeniu magnesu na elemencie, który przykleja się do górnej części widoku i zmusza stronę do zatrzymania przewijania w tym miejscu.

scroll-snap-alignto właściwość wymagana dla elementu przyciągającego przewijanie w kontenerze przyciągającym do przewijania. Więcej informacji na temat kontenerów z scroll-snap-typefunkcją przewijania można znaleźć we wpisie almanachu. scroll-snap-aligninformuje przeglądarkę, która część elementu powinny być wyrównane, gdy przystawka punkt napotkaniu: Należy element przystawki do start, centerlub endz nadrzędnego kontenera zawierającego scroll-snap-typenieruchomość?

Jeśli chcesz, aby element wskoczył na miejsce na początku tego elementu, nadaj mu taką scroll-snap-alignwartość:

/* Assuming this element is a child of a container with `scroll-snap-type` set */ .element ( scroll-snap-align: start; )

Składnia

scroll-snap-align: ( none | start | end | center )(1,2)

Dla tej właściwości można określić maksymalnie 2 wartości, reprezentujące odpowiednio blok i oś wbudowaną. Jeśli podasz tylko 1 wartość, ta wartość będzie używana dla obu osi.

Wartości

scroll-snap-align akceptuje następujące wartości:

  • none wyłącza przyciąganie przewijania do elementu
  • start wyrównuje początek elementu z snapportem kontenera zwoju po zatrzaśnięciu na miejscu
  • end wyrównuje koniec elementu do snapport kontenera zwoju po zatrzaśnięciu na miejscu
  • center wyrównuje środek elementu do snapport kontenera zwoju po zatrzaśnięciu na miejscu

Przykład

Wsparcie przeglądarki

Te dane dotyczące obsługi przeglądarek pochodzą od Caniuse, który zawiera więcej szczegółów. Liczba wskazuje, że przeglądarka obsługuje tę funkcję w tej wersji i nowszych.

Pulpit

Chrom Firefox TO ZNACZY Brzeg Safari
69 68 11 * 79 11

Telefon komórkowy / tablet

Android Chrome Android Firefox Android iOS Safari
88 85 81 11.0-11.2

Związane z

  • scroll-snap-type
  • scroll-margin
  • scroll-padding
  • scroll-snap-stop

Zasoby

  • CSS Scroll Snap Rekomendacja kandydata W3C
  • Praktyczne przyciąganie przewijania CSS
  • Przedstawiamy punkty przyciągania przewijania CSS