Atrybut scroll-padding-left w CSS

definicja i użycie

scroll-padding-left ustawienie atrybutu określa odległość od lewej strony kontenera do pozycji przyciągania elementu.

pozycja przyciągania to pozycja, w której podelement przyciąga się do kontenera po zatrzymaniu przewijania.

pozycja przyciągania jest przez scroll-snap-align ustawienia atrybutu, ale może również być wpływane przez atrybuty CSS direction i writing-mode wpływu。

Uwaga：Ten atrybut jest有效仅在吸附位置设置在子元素左侧时。

Aby zobaczyć scroll-padding-left W efekcie, atrybut musi być ustawiony na elementach potomnych scroll-snap-align Atrybut, oraz ustaw吸附属性 scroll-padding-left i scroll-snap-type Atrybut.

Przykład

Przykład 1

Ustaw滚动内边距 na odległość 20px od lewej strony kontenera do miejsca吸附:

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

Spróbuj sam

Przykład 2: Biblioteka obrazów

scroll-padding-left Atrybut można użyć w galeriach obrazów z吸附behaviour, aby wyrzucić obraz z tyłu stałego elementu do widoku:

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

Spróbuj sam

Przykład 3: Ustawienie滚动内边距 w lewo

Gdy吸附行为 jest ustawiony w obu kierunkach,也可以在容器上设置 scroll-padding-left Atrybut. Przesuń poziomo do następnego elementu, aby zobaczyć efekt:

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

Spróbuj sam

Przykład 4:吸附位置

Aby scroll-padding-left Atrybut działa,吸附位置 musi być ustawiony na lewej stronie elementu potomnego. W tym przykładzie,direction Wartość atrybutu 'rtl' zmieni吸附位置 z lewej strony elementu potomnego na prawą. Używając takiego kodu,scroll-padding-left Atrybut przestanie działać:

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

Spróbuj sam

Język CSS

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

Wartość atrybutu

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

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

Nie można używać ujemnych wartości. Zobacz:Jednostki CSS.
% Określ procentową szerokość elementu zawierającego 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.scrollPaddingLeft="20px"

Wsparcie przeglądarki

Liczby w tabeli oznaczają wersję przeglądarki, która w pełni obsługuje tę właściwość.

Chrome Edge Firefox Safari Opera
69.0 79.0 68.0 14.1 56.0

powiązane strony

Wskazówka:Atrybut direction w CSS

Wskazówka:Atrybut scroll-snap-align w CSS

Wskazówka:Atrybut scroll-snap-type w CSS

Wskazówka:Atrybut writing-mode w CSS