Атрибут CSS scroll-padding

Definition and usage

scroll-padding The property specifies the distance from the container to the吸附位置 of the child element.

This means that when you stop scrolling, the scroll will quickly adjust and stop at a specified distance from the container to the吸附位置 of the focus child element.

The吸附位置 refers to the fixed position of the child element in the container when it stops scrolling.

scroll-padding The property is a shorthand for the following properties:

scroll-padding The value of the property can be set in different ways:

If the scroll-padding property has four values:

scroll-padding: 15px 30px 60px 90px;
  • Upper distance is 15px
  • Right distance is 30px
  • Lower distance is 60px
  • Left distance is 90px

If the scroll-padding property has three values:

scroll-padding: 15px 30px 60px;
  • Upper distance is 15px
  • отступы слева и справа составляют 30px
  • Lower distance is 60px

If the scroll-padding property has two values:

scroll-padding: 15px 30px;
  • Upper and lower distances are 15px
  • отступы слева и справа составляют 30px

Если у атрибута scroll-padding есть одно значение:

scroll-padding: 10px;
  • Все четыре стороны имеют расстояние 10px

чтобы увидеть scroll-padding атрибут на родительском элементе, эффект которого необходимо увидеть на дочернем элементе: scroll-snap-align атрибут, и установите scroll-padding и scroll-snap-type атрибут.

Примечание:В следующем примере отступы для всех сторон установлены, но из-за scroll-snap-align Установите значение "start", поэтому изменяется только отступ для верхнего края, что изменяет поведение скроллинга.

Пример

Пример 1

Установите отступы для скроллинга от контейнера к吸附ящемуся положению в 20px:

div {
  scroll-padding: 20px;
}

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

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

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

#container {
  scroll-padding: 30px 0 0 0;
}
Фиксированный верхний элемент
Пекин Танцор Вuhan Тюльпан Ханчжоу

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

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

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

#container {
  scroll-padding: 0 10px 30px 0;
}





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

CSS синтаксис

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

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

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

Установите отступы для скроллинга в единицах px, pt, cm и т.д.

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

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

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

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

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

Chrome Edge Firefox Safari Opera
69.0 79.0 68.0 14.1 56.0

Связанные страницы

См. также:Атрибут CSS scroll-padding-bottom

См. также:Атрибут CSS scroll-padding-left

См. также:Атрибут CSS scroll-padding-right

См. также:Атрибут CSS scroll-padding-top

См. также:Атрибут CSS scroll-snap-align

См. также:Атрибут CSS scroll-snap-type