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

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

scroll-margin-inline Свойство определяет расстояние между положением吸附а и контейнером в направлении inline.

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

Направление inline означает направление размещения следующего символа по отношению к текущему символу в строке, это также способ-layout для тегов с CSS display: inline; (например, теги <a> и <strong>) в тексте. Направление inline зависит от языка письма, например, новые символы арабского языка располагаются справа налево, поэтому направление inline справа налево, а на английских страницах направление inline слева направо. Направление inline можно определить с помощью CSS свойства direction и writing-mode Определение.

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

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

• scroll-margin-inline-start
• scroll-margin-inline-end

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

scroll-margin-inline: 20px 70px;

• Расстояние от начала составляет 20px
• Расстояние от конца составляет 70px

Если у свойства scroll-margin-inline есть значение:

scroll-margin-inline: 20px;

• Расстояние от начала и конца составляет 20px

Чтобы увидеть scroll-margin-inline Эффект свойств необходимо установить на подэлементах scroll-margin-inline и 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-inline: 20px;
}

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

Пример 2

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

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

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

Пример 3

Когда у элемента <div> direction Когда атрибут scroll-margin-inline установлен в rtl, направленность в строке внутреннего направления слева направо. Результатом является перемещение начальной позиции элемента из левого края в правый край, а конечной позиции элемента из правого края в левый край. Это также влияет на: scroll-margin-inline Атрибут:

div {
  scroll-margin-inline: 0 20px;
  direction: rtl;
}

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

Синтаксис CSS

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

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

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

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

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

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

См. также:Атрибут CSS direction

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

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

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

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

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