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

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

scroll-margin-top указать расстояние между吸附 positiей и контейнером.

Позиция吸附а指的是 позиция подэлемента в контейнере, когда прокрутка останавливается. Позиция吸附а указывается с помощью атрибута scroll-snap-align Атрибут устанавливает позицию吸附а и может также влиять на CSS атрибуты direction и writing-mode влияние.

Внимание:Этот атрибут действует только при установке吸附 позиции на верх подэлемента.

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

Пример

Пример 1

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

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

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

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

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

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

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

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

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

#container {
  writing-mode: vertical-rl;
}
#container > div {
  scroll-margin-top: 30px;
  scroll-snap-align: start none;
}

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

CSS синтаксис

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

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

Значение Описание
0 Верхний отступ прокрутки внешней рамки равен 0. Это значение по умолчанию.
length

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

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

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

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

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

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

Chrome Edge Firefox Сafari Опера
69.0 79.0 68.0 14.1 56.0

Соответствующие страницы

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

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

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

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