Atrybut scroll-snap-align CSS

Definicja i użycie

scroll-snap-align właściwość określa, że element przyciągnie się do miejsca skupienia, gdy zatrzymasz przewijanie.

Aby osiągnąć efekt przyciągania do punktu吸附行为，musisz ustawić scroll-snap-align właściwość, i ustawienie na elemencie nadrzędnym scroll-snap-type Atrybut.

Przykład

Przykład 1

Gdy użytkownik zatrzymuje przewijanie, najbliższy element przyciąga się do pozycji środka:

div {
  scroll-snap-align: center;
}

Spróbuj sam

Przykład 2: Galeria obrazów

scroll-snap-align Atrybut jest bardzo odpowiedni do użycia w przeglądaniu galerii obrazów. Tutaj kierunek przewijania jest poziomy, a sposób przyciągania do środka jest środkiem. Gdy użytkownik puści paskę przewijania, najbliższy obraz przyciąga się do środka obszaru przewijania. Spróbuj kliknąć obraz, a następnie użyć strzałek w lewo i prawo, aby przeglądać je:

#container > img {
  scroll-snap-align: none center;
}
Pekin Tancerz Wuhan Tulipan Hangzhou

Spróbuj sam

alley bridge in jungle mountains man with camera Cinque Terre

Przykład 3: Wyrównanie przyciągania pozycji w kierunku blokowym

Gdy przewijanie jest pionowe:scroll-snap-align Atrybut może również być ustawiony na początkową pozycję elementu w kierunku blokowym:

#container > div {
  scroll-snap-align: start none;
}

Spróbuj sam

Gramatyka CSS

scroll-snap-align: none|start|end|center|block inline|initial|inherit;

Wartość atrybutu

Wartość Opis
none Brak efektu przyciągania do przeciągania. Domyślna wartość.
start Przy rysowaniu na osi x i y, element przyciąga się do początku elementu.
end Przy rysowaniu na osi x i y, element przyciąga się do końca elementu.
center Przy rysowaniu na osi x i y, element przyciąga się do środka elementu.
block inline Dwuwartościowy format. Pierwsza wartość określa sposób przyciągania w kierunku blokowym, druga wartość określa sposób przyciągania w kierunku wierszowym.
initial Ustaw tę właściwość na jej wartość domyślną. Zobacz: initial.
inherit Inhereduje tę właściwość od elementu nadrzędnego. Zobacz: inherit.

Szczegóły techniczne

Domyślna wartość: none
Inheredność: Nie
Tworzenie animacji: Nieobsługiwane. Zobacz:Atrybuty animacji.
Wersja: CSS3
Gramatyka JavaScript: object.style.scrollSnapAlign="start"

Wsparcie przeglądarki

Liczby w tabeli oznaczają wersje przeglądarek, które w pełni obsługują tę właściwość.

Chrome Edge Firefox Safari Opera
69.0 79.0 68.0 11.0 56.0

Związane strony

Wskazówka:Atrybut scroll-snap-type CSS