Атрибут scroll-padding-block CSS

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

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

Это означает, что при остановке скроллинга滚动 быстро регулируется и останавливается на расстоянии, указанном между吸附ной позицией и контейнером в блоковом направлении.

Блоковое направление — это направление размещения следующей строки относительно текущей строки, это также способ размещения элементов с CSS display: block; (например, тегов <p> и <div>) на странице. Блоковое направление зависит от языка написания, например, в монгольском языке новые строки выстраиваются слева направо, поэтому блоковое направление также слева направо, а на английских страницах блоковое направление направлено вниз. Блоковое направление можно определить с помощью CSS-атрибута writing-mode определить.

Позиция привязки — это положение, в котором подэлемент吸附ается в контейнере, когда вы останавливаете скроллинг.

Внимание:Этот атрибут действует только в блоковом направлении:scroll-snap-align Свойство эффективно, когда установлено 'start' или 'end'.

scroll-padding-block Свойство является сокращением следующих свойств:

• scroll-padding-block-start
• scroll-padding-block-end

scroll-padding-block Значение свойства можно установить несколькими способами:

Если у свойства scroll-padding-block два значения:

scroll-padding-block: 10px 50px;

• Расстояние от начала составляет 10px
• Расстояние от конца составляет 50px

Если у свойства scroll-padding-block есть значение:

scroll-padding-block: 10px;

• Расстояние от начала и конца составляет 10px

Чтобы увидеть scroll-padding-block Эффект свойств необходимо установить на подэлементах scroll-snap-align Свойство и устанавливается на родительском элементе scroll-padding-block и scroll-snap-type Свойства.

CSS scroll-padding-block и scroll-padding-inline Свойство связано с свойствами CSS Атрибут scroll-padding-top CSS,scroll-padding-bottom,scroll-padding-left и scroll-padding-right очень похожи, но scroll-padding-block и scroll-padding-inline Свойство зависит от направления блока и направлений строки.

Пример

Пример 1

В направлении блока установить отступ скроллинга в 20px от контейнера к吸附ной позиции:

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

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

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

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

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

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

Пример 3

Когда у контейнерного элемента writing-mode Когда значение свойства установлено в vertical-rl, начальная позиция контейнера и его подэлементов в направлении блока смещается от верха к правому краю, а конечная позиция смещается от низа к левому краю. Это влияет на поведение привязки к скроллингу и: scroll-padding-block Как работает свойство:

#container {
  scroll-padding-block: 20px 0;
  writing-mode: vertical-rl;
}

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

CSS синтаксис

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

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

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

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

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

См. также:

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

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

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

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

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