Основные понятия скролл-снэпа

Прежде чем определить скролл-снэп, необходимо включить прокрутку в контейнере прокрутки. Для этого убедитесь, что у контейнера прокрутки задан размер и включён overflow.

Затем можно определить скролл-снэп в контейнере прокрутки, используя следующие два ключевых свойства:

• scroll-snap-type: С помощью этого свойства можно определить, может ли прокручиваемая область привязываться, необходима ли привязка или она необязательна, и по какой оси должна происходить привязка.
• scroll-snap-align: Это свойство задаётся для каждого дочернего элемента контейнера прокрутки, и с его помощью можно определить позицию привязки каждого дочернего элемента или отсутствие таковой.
• scroll-snap-stop: Это свойство гарантирует, что дочерний элемент привязывается во время прокрутки, а не прокручивается мимо него.
• scroll-margin: Это свойство можно задать для дочерних элементов, которые привязываются во время прокрутки, чтобы создать отступ от заданной области.
• scroll-padding: Это свойство можно задать для контейнера прокрутки, чтобы создать смещение привязки.

Пример ниже демонстрирует скролл-снэп по вертикальной оси, которая определяется scroll-snap-type. Кроме того, scroll-snap-align применяется ко всем дочерним элементам <section> элемента, определяя точку, в которой должна завершиться прокрутка каждого дочернего элемента.

<article class="scroller">
  <section>
    <h2>Section one</h2>
  </section>
  <section>
    <h2>Section two</h2>
  </section>
  <section>
    <h2>Section three</h2>
  </section>
</article>

.scroller {
  height: 300px;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}

.scroller section {
  scroll-snap-align: start;
}

Свойству scroll-snap-type нужна ось, вдоль которой происходит скролл-снэп. Это может быть x, y, или логические отображения block или inline. Вы также можете использовать ключевое слово both для работы скролл-снэпа вдоль обеих осей.

Вы также можете передать ключевые слова mandatory или proximity. Ключевое слово mandatory сообщает браузеру, обязательно ли содержимому привязываться к определённой точке, независимо от положения прокрутки. Ключевое слово proximity означает, что содержимое может привязаться к точке, но не обязательно.

Использование mandatory создаёт очень последовательный опыт прокрутки — вы знаете, что браузер всегда будет привязываться к каждой определённой точке. Это означает, что вы можете быть уверены, что элемент, который вы ожидаете увидеть вверху экрана, будет там после завершения прокрутки. Однако это может вызвать проблемы, если содержимое больше, чем вы ожидаете — пользователи могут столкнуться с разочарованием, так как не смогут прокрутить и просмотреть определённую точку содержимого. Поэтому использование mandatory следует тщательно рассматривать и использовать только в ситуациях, когда вы знаете, сколько содержимого находится на экране или в прокручиваемой области в любой момент.

Значение proximity привязывает дочерние элементы к позиции только при близости, и браузеры определяют точное расстояние. Нажмите «Воспроизвести», чтобы изменить пример ниже в MDN Playground. Поочерёдно меняйте значение scroll-snap-type между mandatory и proximity, чтобы увидеть, как это влияет на опыт прокрутки.

<article class="scroller">
  <section>
    <h2>Section one</h2>
    <p>
      Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce
      kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus
      winter purslane kale. Celery potato scallion desert raisin horseradish
      spinach carrot soko.
    </p>
  </section>
  <section>
    <h2>Section two</h2>
    <p>
      Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce
      kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus
      winter purslane kale. Celery potato scallion desert raisin horseradish
      spinach carrot soko.
    </p>
  </section>
  <section>
    <h2>Section three</h2>
    <p>
      Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce
      kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus
      winter purslane kale. Celery potato scallion desert raisin horseradish
      spinach carrot soko.
    </p>
  </section>
</article>

.scroller {
  height: 300px;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}

.scroller section {
  scroll-snap-align: start;
}

В приведенном выше примере height: 300px; и overflow-y: scroll; установлены для контейнера прокрутки. Если содержимое не выходит за пределы своего контейнера, то прокрутка не нужна.

Допустимые значения для свойства scroll-snap-align включают start, end, center, и none. Эти значения используются для указания точки в контейнере прокрутки, к которой должно привязываться содержимое. Нажмите «Воспроизвести» в примере ниже и измените значение scroll-snap-align , чтобы увидеть, как это изменяет поведение прокрутки.

.scroller {
  height: 200px;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}

.scroller section {
  scroll-snap-align: start;
}

Если scroll-snap-type равно mandatory и scroll-snap-align для дочернего элемента установлено значение none или оно не установлено (в этом случае оно по умолчанию равно none), пользователь не сможет прокрутить этот элемент в область видимости.

При использовании start или end, если вы не хотите, чтобы содержимое привязывалось прямо к краю контейнера прокрутки, или если вы хотите, чтобы позиция привязки немного смещалась от центра при использовании center, используйте свойство scroll-padding или его эквивалентные значения, чтобы добавить отступ.

В примере ниже scroll-padding установлено в значение 50px. Когда содержимое привязывается к началу второй и третьей секций, прокрутка останавливается на расстоянии 50 пикселей от начала секции. Попробуйте изменить значение scroll-padding , чтобы увидеть, как это изменяет расстояние.

<article class="scroller">
  <section>
    <h2>Section one</h2>
  </section>
  <section>
    <h2>Section two</h2>
  </section>
  <section>
    <h2>Section three</h2>
  </section>
</article>

.scroller {
  height: 300px;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-padding: 50px;
}

.scroller section {
  scroll-snap-align: start;
}

Это может быть полезно, если у вас есть элемент fixed, например, навигационная панель, которая может накладываться на скроллируемое содержимое. Используя scroll-padding, вы можете зарезервировать место для фиксированного элемента, как показано в примере ниже, где элемент <h1> остаётся на экране, когда содержимое прокручивается под ним. Без отступа заголовок перекрывал бы часть содержимого при привязке.

.scroller h1 {
  position: sticky;
  top: 0;
  min-height: 40px;
  background-color: #000;
  color: #fff;
  margin: 0;
  padding: 0;
}

.scroller h2 {
  margin: 0;
  padding: 0;
}

.scroller {
  height: 300px;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-padding: 50px;
}

.scroller section {
  scroll-snap-align: start;
}

Свойство scroll-margin или значения отступа прокрутки в развёрнутом виде можно задать для дочерних элементов, определяя отступ от заданной области. Это позволяет задавать разное пространство для разных дочерних элементов и может использоваться совместно с scroll-padding у родителя.

.scroller {
  height: 300px;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}

.scroller section {
  scroll-snap-align: start;
  scroll-margin: 40px;
}

С помощью свойства scroll-snap-stop можно указать, обязательно ли прокрутка должна привязываться к заданным точкам привязки. В приведённых выше примерах это означало бы, что прокрутка должна останавливаться в начале каждой секции или может прокручиваться мимо секций.

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

• Модуль CSS скролл-снэп
• Управление прокруткой с помощью CSS скролл-снэпа на web.dev (2021)
• Практическое применение CSS скролл-снэпа на CSS-Tricks (2020)
• CSS скролл-снэп на 12 Days of Web (2019)
• Примеры скролл-снэпа на Codepen