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

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

scroll-margin Этот атрибут определяет расстояние между吸附ом (сцеплением) и контейнером.

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

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

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

scroll-margin Значения свойств можно устанавливать несколькими способами:

Если свойство scroll-margin имеет четыре значения:

scroll-margin: 15px 30px 60px 90px;
  • Верхний отступ составляет 15px
  • Правый отступ составляет 30px
  • Низний отступ составляет 60px
  • Левый отступ составляет 90px

Если свойство scroll-margin имеет три значения:

scroll-margin: 15px 30px 60px;
  • Верхний отступ составляет 15px
  • расстояние справа и слева составляет 30px
  • Низний отступ составляет 60px

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

scroll-margin: 15px 30px;
  • расстояние сверху и снизу составляет 15px
  • расстояние справа и слева составляет 30px

если у атрибута scroll-margin есть один значение:

scroll-margin: 10px;
  • расстояние в каждом из четырех направлений составляет 10px

чтобы увидеть scroll-margin атрибуты, чтобы увидеть эффект scroll-margin и scroll-snap-align атрибут и установите его на родительском элементе scroll-snap-type атрибут.

внимание:в следующем примере для всех сторон установлены внешние отступы скроллинга, но из-за scroll-snap-align атрибут установлен в "start", поэтому изменяется только верхний отступ скроллинга.

пример

пример 1

установить внешние отступы скроллинга между吸附ом и контейнером в 20px:

div {
  scroll-margin: 20px;
}

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

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

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

#container > img {
  scroll-margin: 0 0 0 30px;
}
Пекин Танцор Вuhan Тюльпан Ханчжоу

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

пример 3: установка внешних отступов скроллинга в нижней части и справа

можно установить в нижней части и справа от элемента scroll-margin атрибут. Скроллинг по горизонтали и вертикали к следующему элементу позволяет увидеть эффект:

#container > div {
  scroll-margin: 0 10px 30px 0;
}





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

CSS синтаксис

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

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

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

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

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

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

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

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

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

Chrome Edge Firefox Safari Opera
69.0 79.0 90.0 14.1 56.0

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

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

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

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

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

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

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