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

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

scroll-padding-inline-end Свойство определяет расстояние между концом контейнера и положением выравнивания подэлемента в направлении строки.

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

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

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

Внимание:Это свойство действует только в scroll-snap-align Эта свойство действует только когда направление строки установлено в 'end'.

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

Пример

Пример 1

Установить внутренний отступ в направлении инлайна от конца контейнера до места выравнивания в 20px:

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

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

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

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

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

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

Пример 3

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

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

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

Пример 4

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

#container {
  scroll-padding-inline-end: 20px;
  direction: rtl;
}

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

CSS синтаксис

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

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

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

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

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

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

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

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

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

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