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

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

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

Это означает, что при остановке прокрутки, прокрутка быстро调整为吸附位置，并在吸附位置和容器之间指定的距离处停止。

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

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

Обратите внимание:Этот атрибут действует только в блоковом направлении scroll-snap-align установлен в 'start'.

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

Пример

Пример 1

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

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

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

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

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

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

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

Пример 3

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

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

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

CSS синтаксис

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

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

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

Поддержка браузерами

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

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

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

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

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