خصائص scroll-margin-bottom في CSS

التعريف والاستخدام

scroll-margin-bottom يحدد الخصائص المسافة بين موضع الالتقاط والمغسلة.

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

Позиция吸附а устанавливается через scroll-snap-align атрибута установки, но также может влиять на CSS атрибут direction и 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 Нижний отступ скролла равен нулю. Это значение по умолчанию.
length

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

См. также:وحدات CSS.

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

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

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

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

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

кروм эдж фаерфокс сafari опера
69.0 79.0 68.0 14.1 56.0

الصفحات ذات الصلة

المرجع:خصائص direction CSS

المرجع:خصائص scroll-snap-align في CSS

المرجع:خصائص scroll-snap-type في CSS

المرجع:خصائص writing-mode CSS