Свойство scroll-padding-inline-start в CSS

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

scroll-padding-inline-start атрибут указывает на расстояние от начала контейнера до吸附а подэлемента в встречном направлении.

Это означает, что при остановке скроллинга, он быстро корректируется и останавливается на расстоянии, указанном между吸附ом и контейнером.

Встречное направление - это направление Placement следующего символа относительно текущего символа в строке, это также способ расположения тегов с CSS display: inline; (например, теги <a> и <strong>) в тексте. Встречное направление зависит от языка написания, например, в арабском языке новые символы располагаются справа налево, поэтому встречное направление также справа налево, а в английских страницах встречное направление слева направо. Встречное направление можно определить через CSS атрибут direction и writing-mode определение.

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

Внимание:Этот атрибут устанавливает только встречном направлении scroll-snap-align равно 'start'.

свойство работает только когда значение scroll-padding-inline-start свойство, чтобы увидеть эффект, его необходимо установить на подэлементах scroll-snap-align свойство и установите его на родительском элементе scroll-padding-inline-start и scroll-snap-type атрибут.

Пример

Пример 1

Установите внутренний отступ для скролла в направлении.inline от начала контейнера до привязки в 20px:

div {
  scroll-padding-inline-start: 20px;
}

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

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

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

#container {
  scroll-padding-inline-start: 30px;
}

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

Пример 3

Когда у контейнерного элемента writing-mode Когда значение атрибута установлено в 'vertical-rl', начальная позиция контейнера и его подэлементов в направлении.inline смещается от верха к правому краю. Это会影响 поведение привязки к скроллу и scroll-padding-inline-start Как работает атрибут:

#container {
  scroll-padding-inline-start: 20px 0;
  writing-mode: vertical-rl;
}

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

Пример 4

Когда у контейнерного элемента direction Когда значение атрибута установлено в 'rtl', начальная позиция контейнера и его подэлементов в направлении.inline смещается от правого края к левому, а конечная позиция смещается от правого края к низу. Это会影响 поведение привязки к скроллу и scroll-padding-inline Как работает атрибут:

#container {
  scroll-padding-inline-start: 20px;
  diretion: rtl;
}

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

CSS синтаксис

scroll-padding-inline-start: auto|value|initial|inherit;

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

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

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

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

См. также страницы

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

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

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

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