CSS 属性 scroll-snap-type 设置了在有滚动容器的情形下吸附至吸附点的严格程度。

scroll-snap-type

使用 scroll snap 也可以用于垂直滚动，全屏展示就是一个很好的例子:

<main>
  <section class="section section-1"></section>
  <section class="section section-2"></section>
  <section class="section section-3"></section>
  <section class="section section-4"></section>
  <section class="section section-5"></section>
</main>

main {
  height: 100vh;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
}

.section {
  height: 100vh;
  scroll-snap-align: start;
}

更多请参考

scroll-snap-type
【干货】使用 CSS Scroll Snap 优化滚动，提升用户体验！