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

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

scroll-padding-left свойство определяет расстояние от левого края контейнера до положения吸附 子элемента.

положение吸附 означает, что в момент остановки скольжения, положение子элемента в контейнере吸附到位的位置.

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

Внимание:Эта свойственность действует только в том случае, если положение吸附位于子元素的左侧。

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

Пример

Пример 1

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

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

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

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

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

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

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

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

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

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

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

Пример 4:吸附位置

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

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

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

CSS синтаксис

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

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

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

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

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

相关页面

Ссылка:Атрибут direction в CSS

Ссылка:Свойство scroll-snap-align в CSS

Ссылка:Свойство scroll-snap-type в CSS

Ссылка:Свойство writing-mode в CSS