CSS właściwość scroll-padding-bottom

定义和用法

scroll-padding-bottom 属性指定从容器底部到子元素吸附位置的距离。

吸附位置是指当你停止滚动时，子元素在容器中吸附到位的位置。吸附位置通过 scroll-snap-align 属性设置，但也可能受到 CSS 属性 direction i writing-mode 的影响。

注意：Uwaga:

Atrybut działa tylko, gdy吸附位置 jest ustawiony na dole elementu. scroll-padding-bottom Aby zobaczyć efekt scroll-snap-align Atrybut, i ustaw吸附位置 na elemencie nadrzędnym scroll-padding-bottom i scroll-snap-type Atrybut.

Przykład

Przykład 1

Ustaw spodnia滚动填充 od kontenera do吸附位置 na 20px:

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

Spróbuj sam

Przykład 2: Biblioteka obrazów

W galerii obrazów z吸附 behavior, można użyć scroll-padding-bottom Atrybut pchnie obraz nad stały element:

#container {
  scroll-padding-bottom: 30px;
}

Spróbuj sam

Przykład 3: Ustawienie spodnia滚动填充

Kiedy ustawiasz吸附行为 w dwóch kierunkach, możesz również ustawić na kontenerze scroll-padding-bottom Atrybut. Przewiń w dół, aby zobaczyć efekt:

#container {
  scroll-padding-bottom: 30px;
}

Spróbuj sam

Przykład 4:吸附位置

Aby scroll-padding-bottom Atrybut działa,吸附位置 musi być ustawiony na dole elementu potomnego. W tym przykładzie,writing-mode Atrybut zmieni吸附位置 od dołu elementu potomnego do lewej. Używając takich kodów,scroll-padding-bottom Atrybut przestanie działać:

#container {
  writing-mode: vertical-rl;
  scroll-padding-bottom: 30px;
}
#container > div {
  scroll-snap-align: end none;
}

Spróbuj sam

Język CSS

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

Wartość atrybutu

Wartość Opis
auto Domyślna wartość. Przeglądarka oblicza wypełnienie.
length

Określ scroll-padding-bottom jednostkami px, pt, cm itp.

Nie można używać ujemnych wartości. Zobacz:Jednostki CSS.
% Określ procentową szerokość zawartości elementu jako wewnętrzną margines.
initial Ustaw tę właściwość na jej wartość domyślną. Zobacz: initial.
inherit Inherbuje tę właściwość od elementu nadrzędnego. Zobacz: inherit.

Szczegóły techniczne

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

Wsparcie przeglądarki

Liczby w tabeli wskazują na 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

odnośnik do strony

Odniesienie:Atrybut direction w CSS

Odniesienie:CSS właściwość scroll-snap-align

Odniesienie:CSS właściwość scroll-snap-type

Odniesienie:Atrybut writing-mode w CSS