Свойство scroll-padding-bottom в CSS

определение и использование

scroll-padding-bottom свойство определяет расстояние от нижней части контейнера до позиции吸附 дочернего элемента.

позиция吸附是指当你停止滚动时，дочерний элемент в контейнере吸附到位的位置。Позиция吸附 через scroll-snap-align настройки свойств, но также могут зависеть от свойств CSS направление и writing-mode влияние.

注意：Внимание:

Этот атрибут действует только при установке позиции吸附а в нижней части подэлемента. scroll-padding-bottom Атрибут эффект, который необходимо установить на подэлементе, чтобы увидеть scroll-snap-align Атрибут, и установите на родительском элементе scroll-padding-bottom и scroll-snap-type Атрибут.

Пример

Пример 1

Установите от контейнера до позиции吸附а прокрутки 20px:

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

Попробуйте сами

Пример 2: библиотека изображений

В галерее изображений с吸附 поведением, можно использовать scroll-padding-bottom Атрибут толкает изображение над фиксированным элементом:

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

Попробуйте сами

Пример 3: настройка нижнего заполнения прокрутки

При установке吸附 поведения в двух направлениях, также можно установить на контейнер scroll-padding-bottom Атрибут. Прокрутите вертикально к следующему элементу, чтобы увидеть эффект:

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

Попробуйте сами

Пример 4: позиция吸附а

Чтобы сделать scroll-padding-bottom Атрибут действует,吸附位置 должен быть установлен в нижней части подэлемента. В данном примере,writing-mode Атрибут изменяет吸附位置 с нижней части подэлемента на левую. При использовании такого кода,scroll-padding-bottom Атрибут больше не действует:

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

Попробуйте сами

CSS синтаксис

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

Значение атрибута

Технические детали

Поддержка браузеров

Таблица中表示支持该属性的第一个浏览器的版本。

相关页面

Ссылка:Свойство direction в CSS

Ссылка:Свойство scroll-snap-align в CSS

Ссылка:Свойство scroll-snap-type в CSS

Ссылка:Свойство writing-mode в CSS