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

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

scroll-margin-left 属性指定吸附位置与容器之间的距离。

吸附位置是指子元素在停止滚动时，其在容器中固定到位的位置。吸附位置通过 атрибуты атрибутом, который определяет расстояние между позицией吸附а и контейнером. direction эффекты, которые должны быть установлены на подэлементе, чтобы увидеть: Позиция吸附а指的是 позиция подэлемента в контейнере, к которой он привязывается при остановке прокрутки. Позиция吸附а указывается с помощью атрибута атрибуты устанавливаются, но также могут влиять на CSS атрибуты

writing-modeвлияние.

Внимание: scroll-margin-left Этот атрибут работает только при установке позиции吸附а на левом крае подэлемента. scroll-margin-left эффекты, которые должны быть установлены на подэлементе, чтобы увидеть: атрибуты и установите Атрибут, Атрибут.

Пример

Пример 1

Установите расстояние между吸附ом и контейнером в 20px:

div {
  scroll-margin-left: 20px;
}

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

Пример 2: Библиотека изображений

scroll-margin-left Атрибут может быть использован в галерее изображений с吸附ом. Здесь:scroll-margin-left Позвольте пользователю знать, что слева есть еще одно изображение. Прокрутите через первое изображение, чтобы увидеть эффект:

#container > img {
  scroll-margin-left: 30px;
}

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

Пример 3: Позиция吸附а

Чтобы сделать scroll-margin-left Атрибут работает,吸附 позиция должна быть установлена на левом крае подэлемента. В этом примере:direction Атрибут изменяет吸附 позицию с левого края подэлемента на правый. Используйте такой код:scroll-margin-left Атрибуты, которые больше не будут работать:

#container {
  direction: rtl;
}
#container > div {
  scroll-margin-left: 30px;
  scroll-snap-align: none start;
}

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

CSS синтаксис

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

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

Значение Описание
0 Левое внешнее поле прокрутки равно 0. Значение по умолчанию.
length

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

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

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

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

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

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

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

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

См. также:Свойство direction в CSS

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

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

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