`scroll-padding-inline` CSS-свойство

scroll-padding-inline CSS — это сокращённое свойство, задающее внутренний отступ прокрутки элемента в строчном измерении.

Свойства scroll-padding задают смещения для оптимальной области просмотра области прокрутки — области, используемой как целевая для размещения содержимого в поле зрения пользователя. Это позволяет автору исключить участки области прокрутки, закрытые другим содержимым (например, панелями инструментов или боковыми панелями с фиксированным позиционированием), либо увеличить расстояние между целевым элементом и краями области прокрутки.

Попробуйте

scroll-padding-inline: 0;

scroll-padding-inline: 20px;

scroll-padding-inline: 2em;

<section class="default-example" id="default-example">
  <div class="scroller" id="example-element">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
  <div class="info">Scroll »</div>
</section>

.default-example {
  flex-wrap: wrap;
}

.default-example .info {
  width: 100%;
  padding: 0.5em 0;
  font-size: 90%;
}

.scroller {
  text-align: left;
  width: 250px;
  height: 250px;
  overflow-x: scroll;
  display: flex;
  box-sizing: border-box;
  border: 1px solid black;
  scroll-snap-type: x mandatory;
}

.scroller > div {
  flex: 0 0 250px;
  width: 250px;
  background-color: rebeccapurple;
  color: white;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start;
}

.scroller > div:nth-child(even) {
  background-color: white;
  color: rebeccapurple;
}

Составные свойства

Это сокращённая запись следующих CSS-свойств:

• scroll-padding-inline-end
• scroll-padding-inline-start

Синтаксис

/* Keyword values */
scroll-padding-inline: auto;

/* <length> values */
scroll-padding-inline: 10px;
scroll-padding-inline: 1em 0.5em;
scroll-padding-inline: 10%;

/* Global values */
scroll-padding-inline: inherit;
scroll-padding-inline: initial;
scroll-padding-inline: revert;
scroll-padding-inline: revert-layer;
scroll-padding-inline: unset;

Значения

<length-percentage>

Внутреннее смещение от соответствующего края области прокрутки, заданное допустимым значением длины или процентом.

auto

Смещение определяется пользовательским агентом. Обычно оно равно 0px, однако пользовательский агент может определить другое значение, если оно будет более подходящим.

Формальное определение

Формальный синтаксис

scroll-padding-inline = 
  [ auto | <length-percentage> ]{1,2}

<length-percentage> = 
  <length> |
  <percentage>

Спецификации

Совместимость с браузерами

См. также

• Модуль CSS scroll snap
• Управляемая прокрутка с помощью CSS scroll snap на web.dev (2018)