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

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

scroll-margin-bottom Атрибут определяет расстояние между吸附位置 и контейнером.

吸附位置是指子元素在停止滚动时吸附到容器中的位置。

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

влияние.Примечание:

Этот атрибут действует только при吸附 положении установлено в нижней части подэлемента. scroll-margin-bottom эффекты атрибутов, которые должны быть установлены на подэлементе, чтобы увидеть scroll-margin-bottom и scroll-snap-align Атрибут и установите scroll-snap-type Атрибут.

Пример

Пример 1

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

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

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

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

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

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

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

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

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

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

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

Синтаксис CSS

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

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

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

Укажите нижний отступ прокрутки в单位和 px, pt, cm и т.д. Допускаются отрицательные значения.

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

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

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

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

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

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

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

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

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

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

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