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

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

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

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

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

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

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

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

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

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

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

Пример 2

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

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

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

CSS синтаксис

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

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

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

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

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

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

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

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

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