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

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

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

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

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

Позиция吸附а指的是当您停止滚动时，子元素在容器中吸附到位的位置。

Внимание:Этот свойство установлен только в направлении строки scroll-snap-align 'end'.

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

Установить расстояние от吸附ного положения до контейнера, который можно прокручивать:

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

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

Пример 2

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

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

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

Пример 3

Когда значение свойства <div> элемента direction Когда значение свойства установлено в rtl, направленность строки внутреннего формата справа налево. Результатом является то, что край элемента перемещается с правого края на левый:

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

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

CSS синтаксис

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

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

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

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

Таблица中表示支持该属性的第一个浏览器的版本。

相关页面

Ссылка:Атрибут CSS direction

Ссылка:Свойство scroll-snap-align в CSS

Ссылка:Свойство scroll-snap-type в CSS

Ссылка:Свойство writing-mode в CSS