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

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

scroll-margin-right Свойство указывает на расстояние между吸附 позиций и контейнером.

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

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

Чтобы увидеть scroll-margin-right Свойства эффектов на родительском элементе, но они также могут зависеть от свойств CSS scroll-margin-right и scroll-snap-align Свойство и установите scroll-snap-type Свойство.

Пример

Пример 1

Установите滚动 внешнего поля между吸附 позиций и контейнером в 20px:

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

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

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

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

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

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

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

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

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

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

CSS синтаксис

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

Значение свойства

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

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

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

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

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

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

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

См. также:CSS режим-писания свойство