Atrybut scroll-margin-right w CSS

Definicja i użycie

scroll-margin-right 属性指定吸附位置与容器之间的距离。

Właściwość określa odległość między pozycją przyciągania a kontenerem. scroll-snap-align Pozycja przyciągania to pozycja, w której element potomny jest zamrożony w kontenerze po zatrzymaniu przewijania. Pozycja przyciągania jest określona przez właściwość: direction i ustawienie, ale może również wpływać na właściwości CSS Właściwość writing-mode

wpływ.Uwaga:

ten atrybut działa tylko wtedy, gdy pozycja przyciągania jest ustawiona na prawej stronie elementu potomnego. scroll-margin-right efekt właściwości, musi być ustawiony na elementach potomnych, aby zobaczyć: scroll-margin-right i scroll-snap-align Właściwość, oraz ustawienie scroll-snap-type Właściwość.

Przykład

Przykład 1

Ustaw margines pływający między pozycją przyciągania a kontenerem na 20px:

div {
  scroll-margin-right: 20px;
}

Spróbuj sam

Przykład 2: Biblioteka obrazów

scroll-margin-right Właściwość może być używana w galeriach obrazów z zachowaniem przyciągania. W tym przypadku:scroll-margin-right Poinformuj użytkownika, że po prawej stronie znajduje się jeszcze jedno zdjęcie. Przesuń strzałką, aby zobaczyć efekt:

#container > img {
  scroll-margin-right: 30px;
}

Spróbuj sam

Przykład 3: Pozycja przyciągania

Aby scroll-margin-right Właściwość działa, pozycja przyciągania musi być ustawiona na prawej stronie elementu potomnego. W tym przykładzie:direction Właściwość zmienia pozycję przyciągania z prawej strony elementu potomnego na lewą. Używając takich kodów:scroll-margin-right Właściwości przestaną działać:

#container {
  direction: rtl;
}
#container > div {
  scroll-margin-right: 30px;
  scroll-snap-align: none end;
}

Spróbuj sam

Język CSS

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

Wartość atrybutu

Wartość Opis
0 Skrajny margines pływający po prawej stronie wynosi 0. Domyślna wartość.
length

Określ wartość skrajnej marginesu pływającego po prawej stronie w jednostkach px, pt, cm itp. Dozwolone 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
Inheredność: Nie
Tworzenie animacji: Nieobsługiwane. Zobacz:Atrybuty animacji.
Wersja: CSS3
Język JavaScript: object.style.scrollMarginRight="20px"

Wsparcie przeglądarki

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

Chrome Edge Firefox Safari Opera
69.0 79.0 68.0 14.1 56.0

Strony związane

Odniesienie:Atrybut direction w CSS

Odniesienie:Atrybut scroll-snap-align w CSS

Odniesienie:Atrybut scroll-snap-type w CSS

Odniesienie:Atrybut writing-mode CSS