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

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

scroll-padding-top Атрибут определяет расстояние от верха контейнера до позиции吸附а подэлемента.

Позиция吸附а - это положение, в котором подэлемент吸附到位， когда скроллинг останавливается.

吸附位置由 scroll-snap-align влияние. но также может зависеть от свойств CSS и writing-mode атрибута установки направления

влияние.Внимание:

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

Пример

Пример 1

Установить внутренний отступ таким образом, чтобы расстояние от верха контейнера до точки吸附а составляло 20px:

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

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

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

scroll-padding-top Атрибут можно использовать в галереях с吸附ом, чтобы推向 фиксированный элемент下方:

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

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

Пример 3: Установка внутреннего отступа вверху

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

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

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

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

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

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

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

Синтаксис CSS

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

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

Значение Описание
auto Значение по умолчанию. Браузер вычисляет отступ.
length

Указать scroll-padding-top в единицах px, pt, cm и т.д.

Не допускаются отрицательные значения. См. также:Единицы CSS.
% Указать процент от ширины содержимого элемента в качестве внутреннего отступа.
initial Этот атрибут устанавливается в значение по умолчанию. См. также initial.
inherit Эта атрибут наследуется от родительского элемента. См. также inherit.

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

Значение по умолчанию: auto
Инheritance: Нет
Создание анимации: Не поддерживается. См. также:Атрибуты, связанные с анимацией.
Версия: CSS3
Синтаксис JavaScript: object.style.scrollPaddingTop="20px"

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

Числа в таблице представляют собой версии браузеров, которые полностью поддерживают этот атрибут.

Хром Эдж Фаерфокс Сафари Опера
69.0 79.0 68.0 14.1 56.0

Соответствующие страницы

См. также:CSS свойство direction

См. также:Свойство scroll-snap-align в CSS

См. также:Свойство scroll-snap-type в CSS

См. также:CSS writing-mode свойство