CSS-свойство `scroll-snap-align`

Свойство scroll-snap-align CSS задаёт положение привязки блока как выравнивание его области привязки.

Попробуйте

scroll-snap-align: start;

scroll-snap-align: end;

scroll-snap-align: center;

<section class="default-example" id="default-example">
  <div id="example-parent">
    <div>1</div>
    <div id="example-element">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%;
}

#example-parent {
  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;
}

#example-parent > div {
  flex: 0 0 66%;
  width: 250px;
  background-color: rebeccapurple;
  color: white;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#example-parent > div:nth-child(even) {
  background-color: white;
  color: rebeccapurple;
}

Синтаксис

/* Single keyword value */
scroll-snap-align: none;
scroll-snap-align: center;
scroll-snap-align: start;
scroll-snap-align: end;

/* Two keyword values */
scroll-snap-align: start end;
scroll-snap-align: end center;
scroll-snap-align: center start;

/* Global values */
scroll-snap-align: inherit;
scroll-snap-align: initial;
scroll-snap-align: revert;
scroll-snap-align: revert-layer;
scroll-snap-align: unset;

Значения

Для этого свойства указываются одно или два следующих ключевых значения, разделённых пробелом:

none

Блок не задаёт положение привязки по этой оси.

start

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

end

Выравнивание по концу области привязки прокрутки этого блока внутри области привязки контейнера прокрутки считается положением привязки по этой оси.

center

Выравнивание по центру области привязки прокрутки этого блока внутри области привязки контейнера прокрутки считается положением привязки по этой оси.

Описание

Свойство scroll-snap-align задаёт положение привязки блока как выравнивание его области привязки (в качестве выравниваемого объекта) внутри области привязки контейнера (в качестве контейнера выравнивания).

Для свойства scroll-snap-align можно указать одно или два значения. Если задано одно значение, оно применяется к блочной и строчной осям. Если заданы два значения, первое управляет блочной осью, а второе — строчной.

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

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

scroll-snap-align = 
  [ none | start | end | center ]{1,2}

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

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

См. также

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