Главы со снапом

Полноэкранные главы защёлкиваются при прокрутке, точки показывают позицию.

Крутите колесо внутри рамки.

Глава 1

Глава 2

Глава 3

Контейнер прокручивается сам (колесом внутри рамки): каждая глава защёлкивается на весь экран, точки справа показывают позицию.

Код

<main class="chapters">
  <section class="ch">Глава 1</section>
  <section class="ch">Глава 2</section>
  <section class="ch">Глава 3</section>
</main>

<style>
.chapters { height: 100vh; overflow-y: auto;
  scroll-snap-type: y mandatory; }      /* защёлкивание */
.ch { height: 100vh; scroll-snap-align: start; }
</style>

<script>
// точки-навигация: подсветка текущей главы
var chs = document.querySelectorAll(".ch");
var io = new IntersectionObserver(function (es) {
  es.forEach(function (e) {
    if (e.isIntersecting) {
      var idx = [].indexOf.call(chs, e.target);
      // dots[idx].classList.add("on") ...
    }
  });
}, { threshold: .6 });
chs.forEach(function (c) { io.observe(c); });
</script>

Промпт для ИИ

Сделай полноэкранные главы со скролл-снапом: контейнер height:100vh, overflow-y:auto, scroll-snap-type:y mandatory; главы height:100vh со scroll-snap-align:start — прокрутка защёлкивается на границах. Справа — колонка точек: IntersectionObserver с root=контейнер и threshold 0.6 подсвечивает текущую (активная крупнее и ярче). Если на сайте Lenis — контейнеру data-lenis-prevent, иначе снап не сработает.