Свойство CSS scroll-margin-block

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

scroll-margin-block Свойство определяет расстояние между положением привязки и контейнером в блоковом направлении.

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

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

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

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

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

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

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

scroll-margin-block: 10px 50px;
  • scroll-margin-block: 10px 50px;
  • расстояние от начала составляет 10px

расстояние от конца составляет 50px

scroll-margin-block: 10px;
  • Если у свойства scroll-margin-block есть значение:

расстояние от начала и конца составляет 10px scroll-margin-block свойство, чтобы увидеть эффект scroll-margin-block и scroll-snap-align свойство, и установить его на родительском элементе scroll-snap-type свойствам.

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

Пример

Пример 1

Установить расстояние между положением привязки в блоковом направлении и контейнером, который можно скроллить:

div {
  scroll-margin-block: 10px;
}

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

Пример 2

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

div {
  scroll-margin-block: 20px 0;
  writing-mode: vertical-rl;
}

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

Синтаксис CSS

scroll-margin-block: 0|value|initial|inherit;

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

Значение Описание
0 По умолчанию. Значение по умолчанию scroll-margin-block для элемента.
length

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

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

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

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

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

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

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

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

См. также:Свойство CSS scroll-margin-block-end

См. также:Свойство CSS scroll-margin-block-start

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

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

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