scroll-snap-align

Wskazuje, którą krawędzią element ma się przyciągać w przewijanym kontenerze.

Wartość domyślna: none
Dziedziczona: Nie
Animowalna: nie
Dotyczy: wszystkie elementy (dzieci kontenera przewijania)
JavaScript: element.style.scrollSnapAlign = "center"

Na tej stronie

Przykład
Definicja i zastosowanie
Składnia
Wartości
Wartości w praktyce
Obsługa przeglądarek
Dobre praktyki
Powiązane hasła

Przykład

CSS

.sections {
  height: 100dvh;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
}

.sections > section {
  scroll-snap-align: start;
}

HTML przykładu

<div style="height: 120px; overflow-y: auto; scroll-snap-type: y mandatory; border-radius: 10px;">
  <section class="box" style="height: 120px; scroll-snap-align: start; border-radius: 0;">Sekcja 1: przewiń w dół</section>
  <section class="box" style="height: 120px; scroll-snap-align: start; border-radius: 0;">Sekcja 2</section>
  <section class="box" style="height: 120px; scroll-snap-align: start; border-radius: 0;">Sekcja 3</section>
</div>

Podgląd

Definicja i zastosowanie

Właściwość scroll-snap-align ustawia się na dzieciach kontenera z scroll-snap-type. Decyduje, czy po przewinięciu element ustawi się początkiem, środkiem czy końcem do krawędzi kontenera.

start pasuje do list i sekcji czytanych od góry, center do karuzel ze zdjęciami, a end do rzadszych przypadków, jak czat przewijany od dołu.

Odstęp między krawędzią kontenera a punktem przyciągania zmienisz właściwością scroll-padding na kontenerze.

Składnia

scroll-snap-align: none | start | center | end;

Wartości

start
Przewiń: karta ustawia się przy lewej krawędzi.
center
Przewiń: karta ustawia się na środku.
end
Przewiń: karta ustawia się przy prawej krawędzi.

Wartość	Opis
start	Przewiń: karta ustawia się przy lewej krawędzi.
center	Przewiń: karta ustawia się na środku.
end	Przewiń: karta ustawia się przy prawej krawędzi.

Wartości w praktyce

start

Przewiń: karta ustawia się przy lewej krawędzi.

.item { scroll-snap-align: start; }

center

Przewiń: karta ustawia się na środku.

.item { scroll-snap-align: center; }

end

Przewiń: karta ustawia się przy prawej krawędzi.

.item { scroll-snap-align: end; }

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

Łącz scroll-snap-align z scroll-padding na kontenerze, jeśli nagłówek zasłania górę przyciągniętej sekcji.
Pełnoekranowe przyciąganie sekcji bywa męczące na długich stronach. Stosuj je z umiarem.

Powiązane hasła

Widzisz błąd albo brakuje przykładu? Napisz do nas.

Darmowy kursPrzećwicz CSS w kursie HTML i CSSZadania z podpowiedziami, edytor kodu i postępy zapisywane na bieżąco.Zobacz kurs