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

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

scroll-margin-block-start Атрибут определяет расстояние между吸附енным положением в направлении блока и контейнером.

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

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

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

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

чтобы увидеть scroll-margin-block-start свойства, чтобы увидеть эффект, необходимо установить их на подэлементе scroll-margin-block-start и 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 Атрибут зависит от направления блока и направления inline.

Пример

Пример 1

В направлении блока, установите отступы для выравнивания с контейнером в 20px:

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

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

Пример 2

Когда у элемента <div> writing-mode Когда атрибут value установлен в vertical-rl, направление блока направлено слева направо. Результатом является то, что начальная часть элемента перемещается вправо от верха:

div {
  scroll-margin-block-start: 50px;
  writing-mode: vertical-rl;
}

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

CSS синтаксис

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

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

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

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

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

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

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

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

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

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

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

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

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

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