停靠效果

以前要实现页面滚动停靠效果需要借助 js 来操作 dom，类似于 fullpage.js 插件，现在纯 css 也能做到同样的事。

scroll-snap-type

scroll-snap-type 属性定义容器的滚动方式。

属性

none | [ x | y | block | inline | both ] [ mandatory | proximity ]?

• x：x 轴；
• y：y 轴；
• both：x 轴 与 y 轴
• mandatory：可选，强制滚动，只要发生滚动就滚到下一页；
• proximity：可选，协商滚动，滚动大半才滚动到下一页，否则留在当前滚动点或回滚当前页（不怎么好使）。

scroll-snap-align

scroll-snap-align 属性指定页面相对容器的滚动方向对齐方式。

属性

• start：头部对齐；
• center：居中对齐；
• end：尾部对齐。

示例

html 核心代码

  
内容1
  
内容2
  
内容3
  
内容4
  
内容5

css 核心代码

.container {
  overflow: hidden auto;
  width: 100vw;
  height: 100vh;
  scroll-snap-type: y mandatory;
}

.box {
  width: 100vw;
  height: 100vh;
  scroll-snap-align: center;
}