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

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

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

позиция吸附 означает позицию吸附到位的位置, когда элемент-дочерний吸附到容器中停止滚动。

позиция吸附 scroll-snap-align свойства установки, но также может зависеть от свойств CSS direction и writing-mode влияние.

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

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

Пример

Пример 1

Установите внутренний отступ так, чтобы расстояние от правого края контейнера до точки吸附а составляло 20px:

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

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

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

scroll-padding-right Атрибут может быть использован в галереях с吸附ом, чтобы протолкнуть изображения за фиксированный элемент в видимость:

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

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

Пример 3: настройка внутреннего отступа справа

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

#container > div {
  scroll-padding-right: 30px;
}

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

Пример 4: положение吸附а

Чтобы сделать scroll-padding-right Атрибут действует,吸附位置 должен быть установлен справа от подэлемента. В данном примере,direction Значение атрибута 'rtl' изменяет吸附位置 с правого края подэлемента на левый. При использовании такого кода,scroll-padding-right Атрибуты, которые больше не работают:

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

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

Синтаксис CSS

scroll-padding-right: auto|value|initial|inherit;

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

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

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

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

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

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

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

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

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