CSS-свойство `scroll-initial-target`

Свойство scroll-initial-target CSS позволяет задавать элементы, которые могут стать целями привязки при первой отрисовке их родительского контейнера прокрутки.

Синтаксис

/* Keyword values */
scroll-initial-target: none;
scroll-initial-target: nearest;

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

Значения

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

none

Элемент не является начальной целью прокрутки.

nearest

Элемент потенциально является начальной целью прокрутки для ближайшего родительского контейнера прокрутки.

Описание

Свойство scroll-initial-target позволяет задавать элементы, к которым следует привязать прокрутку при первой отрисовке родительских контейнеров привязки прокрутки. Установка значения nearest задаёт элемент как потенциальную цель, к которой следует привязать прокрутку, когда ближайший родительский контейнер прокрутки впервые появляется на странице.

Если для нескольких элементов или псевдоэлементов в контейнере прокрутки задано значение nearest, начальной целью привязки прокрутки становится первый элемент в порядке дерева.

Начальное значение — none, то есть элемент, к которому можно привязать прокрутку, по умолчанию не является начальной целью прокрутки. Значение none также можно задать элементу, чтобы явно указать, что он не является начальной целью прокрутки.

Если начальная позиция прокрутки контейнера может задаваться как свойством распределения содержимого place-content, так и свойством scroll-initial-target у любого из его потомков, побеждает первый потомок со значением scroll-initial-target: nearest.

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

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

scroll-initial-target = 
  none |
  nearest

Примеры

Использование scroll-initial-target

В примере ниже показаны два значения scroll-initial-target и то, как выполняется привязка к первому элементу со значением scroll-initial-target.

HTML

Мы добавляем 5 контейнеров, перед которыми размещаем абзац с описанием ожидаемого эффекта.

<p><code>none</code> on #4 only</p>
<div class="none">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div class="set">4</div>
  <div>5</div>
</div>

<p><code>nearest</code> on #4 only</p>
<div class="nearest">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div class="set">4</div>
  <div>5</div>
</div>

<p><code>nearest</code> on even elements</p>
<div class="nearest">
  <div>1</div>
  <div class="set">2</div>
  <div>3</div>
  <div class="set">4</div>
  <div>5</div>
</div>

<p><code>nearest</code> on odd elements</p>
<div class="nearest">
  <div class="set">1</div>
  <div>2</div>
  <div class="set">3</div>
  <div>4</div>
  <div class="set">5</div>
</div>

<p><code>nearest</code> on odd elements, with <code>none</code> on #1</p>
<div class="nearest">
  <div class="set unset">1</div>
  <div>2</div>
  <div class="set">3</div>
  <div>4</div>
  <div class="set">5</div>
</div>

CSS

Мы задаём для элементов со значениями nearest и none поведение контейнеров привязки прокрутки и центрируем элементы, к которым выполняется привязка.

/* mandatory scroll-snap on parent */
div.nearest,
div.none {
  scroll-snap-type: x mandatory;
}

/* scroll-snap alignment for children */
div > div {
  scroll-snap-align: center;
  scroll-initial-target: always;
}

Затем мы задаём scroll-initial-target со значением none или nearest для всех элементов с классом .set.

.none .set,
.nearest .set.unset {
  scroll-initial-target: none;
}
.nearest .set {
  scroll-initial-target: nearest;
}

/* setup */
body {
  height: 100%;
  display: flex;
  align-items: center;
  flex-flow: column nowrap;
  font-family: sans-serif;
  text-align: center;
}

div.nearest,
div.none {
  display: flex;
  overflow: auto;
  font-size: 3rem;
}

div div {
  width: 90%;
  min-width: 15rem;
  flex: none;
  outline: 1px solid #333333;
}

/* coloration */
div > div:nth-child(even) {
  background-color: #87ea87;
}

div > div:nth-child(odd) {
  background-color: #87ccea;
}

p {
  margin: 1em 0 0;
}

@supports not (scroll-initial-target: nearest) {
  :root::before {
    content: "Your browser doesn't support the scroll-initial-target property.";
    background-color: wheat;
    display: block;
    text-align: center;
    padding: 1rem 0;
  }
}

Результат

Эффект этого свойства демонстрируется при отображении контейнера привязки прокрутки на странице.

В каждой строке выполняется привязка к первому элементу со значением nearest, если такой есть, в порядке дерева. В последнем примере мы переопределили значение nearest для первого элемента с помощью none, поэтому первым элементом, для которого задано nearest, становится #3.

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

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

См. также

• Привязка прокрутки CSS