Многим из вас наверняка приходилось иметь дело с версткой страниц, в которых каждая секция должна занимать весь экран окна. Навигация по такой странице, кроме кликабельной части, обычно ещё завязана на скролле - при любом положении ползунка необходимо было дополнительно прокручивать страницу так, чтобы в области видимости мы всегда видели полноценную секцию. Решения обычно были в виде самописных скриптов либо подключения плагинов.

Свойство CSS Scroll Snap позволяет настроить поведение браузера при прокрутке так, чтобы оно подстраивалось под контент.

Пример того, как будет работать прокрутка страницы с применением этого свойства:

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

<div class="scroll-wrapper">
  <div class="scroll-section section1">
    <h2>Section 1</h2>
  </div>
  <div class="scroll-section section2">
    <h2>Section 2</h2>
  </div>
  <div class="scroll-section section3">
    <h2>Section 3</h2>
  </div>
</div>

Далее примарафечиваем внешний вид и применяем набор из двух свойств scroll-snap - один к контейнеру, второй к дочерним элементам:

.scroll-wrapper {
  /* обозначаем высоту контейнера и указываем о вертикальной прокрутке в нем */
  height: 100vh;
  overflow-y: auto;

  /* определяем привязку прокрутки */
  scroll-snap-type: y mandatory;
}

.scroll-section {
  /* обозначаем высоту секции */
  height: 100vh;

  /* настраиваем поведение прокрутки для секции */
  scroll-snap-align: start;
}

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