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

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

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

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

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

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

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

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-start: 20px;
}

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

Пример 2

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

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

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

Пример 3

Когда значение свойства <div> элемента direction Когда значение свойства установлено в rtl, вектор векторного направления снаружи слева направо. Результат: начальная позиция элемента смещается влево (по отношению к исходному направлению, фактически начинается справа, но здесь "влево" означает левую сторону по умолчанию (ltr)), корректируется:

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

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

Синтаксис CSS

inset-inline-start: 0|value|initial|inherit;

Значение свойства

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

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

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

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

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

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

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

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