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 优化滚动，提升用户体验！