Свойство scroll-padding-block-end в CSS

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

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

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

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

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

Примечание:Этот атрибут работает только в направлении блока scroll-snap-align атрибут установлен в 'end', только тогда он будет работать.

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

Пример

Пример 1

Установить блоковое направление внутреннего отступа от конца контейнера до привязки в 20px:

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

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

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

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

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

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

Пример 3

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

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

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

CSS синтаксис

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

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

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

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

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

相关页面

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

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

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