【CSS】使用 scroll snap 实现页面的垂直大屏滚动

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>
1
2
3
4
5
6
7

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

.section {
  height: 100vh;
  scroll-snap-align: start;
}
1
2
3
4
5
6
7
8
9
10
11

更多请参考

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