Atrybut scroll-margin w CSS

Definicja i zastosowanie

scroll-margin Atrybut określa odległość między położeniem przyciągania a kontenerem.

Oznacza to, że po zatrzymaniu przewijania, przesuwanie szybko dostosowuje się i zatrzymuje w odległości określonej między położeniem przyciągania a kontenerem.

Położenie przyciągania to pozycja, w której podelement przyciąga się do położenia w kontenerze po zatrzymaniu przewijania.

scroll-margin Atrybut jest skróconą wersją następujących atrybutów:

scroll-margin Wartości atrybutu można ustawić na różne sposoby:

Jeśli atrybut scroll-margin ma cztery wartości:

scroll-margin: 15px 30px 60px 90px;
  • Dystans od góry wynosi 15px
  • Dystans od prawej strony wynosi 30px
  • Dystans od dołu wynosi 60px
  • Dystans od lewej strony wynosi 90px

Jeśli atrybut scroll-margin ma trzy wartości:

scroll-margin: 15px 30px 60px;
  • Dystans od góry wynosi 15px
  • odległości po bokach wynoszą 30px
  • Dystans od dołu wynosi 60px

Jeśli atrybut scroll-margin ma dwie wartości:

scroll-margin: 15px 30px;
  • odległości od góry i do dołu wynoszą 15px
  • odległości po bokach wynoszą 30px

Jeśli atrybut scroll-margin ma jedną wartość:

scroll-margin: 10px;
  • odległości w czterech kierunkach wynoszą 10px

aby zobaczyć scroll-margin efekt atrybutu musi być ustawiony na elemencie potomnym, aby zobaczyć scroll-margin i scroll-snap-align Atrybut, oraz ustawienie scroll-snap-type Atrybut.

Uwaga:W poniższym przykładzie ustawiono skok zewnętrzny rolki dla wszystkich stron, ale ponieważ scroll-snap-align Atrybut ustawiony na "start", więc zmienił się tylko skok zewnętrzny rolki w górnej części, co zmieniło zachowanie przewijania.

Przykład

Przykład 1

Ustawienie skoku zewnętrznego rolki między pozycją przyciągania a kontenerem na 20px:

div {
  scroll-margin: 20px;
}

Spróbuj sam

Przykład 2: Biblioteka obrazów

scroll-margin Atrybut można zastosować w bibliotekach obrazów z zachowaniem przyciągania.scroll-margin Pozwala użytkownikowi zobaczyć, że po lewej stronie znajduje się jeszcze jedno zdjęcie. Przewiń po pierwszym zdjęciu, aby zobaczyć efekt:

#container > img {
  scroll-margin: 0 0 0 30px;
}
Pekin Tancerz Wuhan Tulipan Hangzhou

Spróbuj sam

Przykład 3: Ustawienie skoku zewnętrznego rolki w dolnej i prawej stronie

Można ustawić go w dolnej i prawej stronie elementu. scroll-margin Atrybut. Poziome i pionowe przewijanie do następnego elementu pokazuje efekt:

#container > div {
  scroll-margin: 0 10px 30px 0;
}





Spróbuj sam

Język CSS

scroll-margin: 0|value|initial|inherit;

Wartość atrybutu

Wartość Opis
0 Skok zewnętrzny rolki wynosi zero. Domyślna wartość.
length

Określ skok zewnętrzny rolki w jednostkach takich jak px, pt, cm itp. Dopuszczalne są wartości ujemne.

Zobacz:Jednostki CSS.
initial Ustaw tę właściwość na jej wartość domyślną. Zobacz: initial.
inherit Dziedziczy tę właściwość od elementu nadrzędnego. Zobacz: inherit.

Szczegóły techniczne

Domyślna wartość: 0
Inherdencja: Nie
Tworzenie animacji: Nie obsługiwane. Zobacz:Atrybuty animacji.
Wersja: CSS3
Język JavaScript: object.style.scrollMargin="20px"

Obsługa przeglądarek

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 90.0 14.1 56.0

powiązane strony

Wskazówka:CSS właściwość scroll-margin-bottom

Wskazówka:CSS właściwość scroll-margin-left

Wskazówka:CSS właściwość scroll-margin-right

Wskazówka:CSS właściwość scroll-margin-top

Wskazówka:CSS właściwość scroll-snap-align

Wskazówka:CSS właściwość scroll-snap-type