Atrybut scroll-padding-right w CSS

definicja i użycie

scroll-padding-right atrybut określa odległość od prawego boku kontenera do położenia przyciągania elementu potomnego.

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

położenie przyciągania scroll-snap-align ustawienia atrybutu, ale może być również wpływane przez atrybuty CSS direction i writing-mode wpływ.

Uwaga:Ta właściwość działa tylko, gdy pozycja przyciągania jest ustawiona na prawej stronie elementu potomnego.

aby zobaczyć scroll-padding-right w elemencie nadrzędnym, musi być ustawiony scroll-snap-align Właściwości, a efekt ustawienia atrybutu scroll-padding-right i scroll-snap-type Atrybut.

Przykład

Przykład 1

Ustaw wewnętrzną margines na odległość 20px od prawej strony kontenera do pozycji przyciągania:

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

Spróbuj sam

Przykład 2: Biblioteka obrazów

scroll-padding-right Atrybut można używać w galeriach obrazów z działaniami przyciągania, aby wyciągnąć obraz z tyłu stałego elementu do widoku:

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

Spróbuj sam

Przykład 3: Ustawienie skrolowania wewnętrznego w prawo

Kiedy ustawione są działania przyciągania w obu kierunkach, można również ustawić scroll-padding-right Właściwość. Przesuń poziomo do następnego elementu, aby zobaczyć efekt:

#container > div {
  scroll-padding-right: 30px;
}

Spróbuj sam

Przykład 4: Pozycja przyciągania

aby scroll-padding-right Właściwość działa, pozycja przyciągania musi być ustawiona na prawej stronie elementu potomnego. W tym przykładzie,direction Wartość atrybutu 'rtl' zmienia pozycję przyciągania z prawej strony elementu potomnego na lewą. Używając takiego kodu,scroll-padding-right Właściwości przestają działać:

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

Spróbuj sam

Język CSS

scroll-padding-right: auto|value|initial|inherit;

Wartość atrybutu

Wartość Opis
auto Domyślna wartość. Przeglądarka oblicza wewnętrzną margines.
length

Określ scroll-padding-right w jednostkach takich jak px, pt, cm.

Nie można używać ujemnych wartości. Zobacz:Jednostki CSS.
% Określ procentową szerokość zawartości jako wewnętrzną margines.
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ść: auto
Inheredność: Nie
Tworzenie animacji: Nieobsługiwane. Zobacz:Atrybuty animacji.
Wersja: CSS3
Język JavaScript: object.style.scrollPaddingRight="20px"

Obsługa przeglądarek

Tabela zawiera wersje przeglądarek, które w pełni obsługuje 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 CSS writing-mode