Atrybut scroll-snap-stop w CSS

Definicja i użycie

Podczas szybkiego przeciągnięcia na panelu dotykowym lub ekranie dotykowymscroll-snap-stop Właściwość określa, czy przewijanie przechodzi bezpośrednio przez elementy, czy zatrzymuje się i przyciąga do następnego elementu.

Aby kontrolować zachowanie zatrzymania przeciągania, musisz ustawić właściwość na elementach podrzędnych scroll-snap-stop i scroll-snap-align Właściwość, jednocześnie ustawiając scroll-snap-type Właściwość.

Uwaga: Aby doświadczyć tej właściwości, musisz używać gestów przeciągania na urządzeniu z panelem dotykowym lub ekranem dotykowym. scroll-snap-stop Efekt atrybutu.

Przykład

Podczas szybkiego przeciągnięcia na panelu dotykowym lub ekranie dotykowym, zmusza przewijanie do zatrzymania się i przyciągnięcia do następnego elementu, zamiast bezpośrednio pomijać elementy:

div {
  scroll-snap-stop: always;
}

Spróbuj sam

Gramatyka CSS

scroll-snap-stop: normal|always|initial|inherit;

Wartość atrybutu

Wartość Opis
normal Domyślna wartość. Po szybkim przeciągnięciu na panelu dotykowym lub ekranie dotykowym, przewijanie powoli zwalnia i pomija wiele elementów.
always Po szybkim przeciągnięciu na panelu dotykowym lub ekranie dotykowym, przewijanie zatrzymuje się i przyciąga następny element do pozycji aktywnego.
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ść: normal
Inheredność: Nie
Tworzenie animacji: Nieobsługiwane. Zobacz:Atrybuty animacji.
Wersja: CSS3
Gramatyka JavaScript: object.style.scrollSnapStop="always"

Obsługa przeglądarki

Tabela zawiera wersje przeglądarek, które w pełni obsługuje tę właściwość.

Chrome Edge Firefox Safari Opera
75.0 79.0 103.0 15.0 62.0

Strony związane

Odnośniki:Atrybut scroll-snap-align w CSS

Odnośniki:Atrybut scroll-snap-type w CSS