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

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

Попробуйте

scroll-padding-inline-start: 0;

scroll-padding-inline-start: 20px;

scroll-padding-inline-start: 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;
}

Синтаксис

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

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

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

Значения

<length-percentage>

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

auto

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

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

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

scroll-padding-inline-start = 
  auto |
  <length-percentage>

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

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

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

См. также

• Модуль привязки прокрутки CSS
• Точный контроль прокрутки с помощью привязки прокрутки CSS на web.dev (2018)