学习CSS Scroll Snapping与scroll-snap-align

假如有个Web页面是一块一块的，如下图所示：
在这里插入图片描述
我们希望可以一块一块的滚动，比如当前一个块滚出去了一部分并且后一个块滚进来一部分的时候，实现后一个块自动滚入或者前一个块回弹到初始位置这种效果，以前的时候用js需要写比较复杂的判断逻辑，后来有了一个css scroll snap这个方法，可以比较方便的实现想要的效果了，基本够用。

基本页面

css代码：

ul {
      max-height: 100vh;
      overflow-y: scroll;
       padding: 0;
    }
    li {
      font-size: 6vw;
      height: 30vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    li:nth-child(1) {
      background-color: rgb(255, 0, 0);
    }

    li:nth-child(2) {
      background-color: rgb(255, 128, 0);
    }

    li:nth-child(3) {
      background-color: rgb(255, 255, 0);
    }

    li:nth-child(4) {
      background-color: rgb(0, 255, 0);
    }

    li:nth-child(5) {
      background-color: rgb(0, 255, 255);
    }

    li:nth-child(6) {
      background-color: rgb(0, 0, 255);
    }

    li:nth-child(7) {
      background-color: rgb(128, 0, 255);
    }

html代码：

 <ul>
    <li>赵</li>
    <li>钱</li>
    <li>孙</li>
    <li>李</li>
    <li>周</li>
    <li>吴</li>
    <li>郑</li>
  </ul>

ul里面七个li, 背景色是赤橙黄绿青蓝紫，文字分别是赵钱孙李周吴郑。
现在的页面就是非常普通的页面，只是普通平常的滚动，还没加效果。

新属性scroll-snap-type与scroll-snap-align

1、scroll-snap-type

The scroll-snap-type property specifies whether a scroll container is a scroll snap container, how strictly it snaps, and which axes are considered. If no strictness value is specified, proximity is assumed.

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

scroll-snap-type指明了一个可以滚动的容器是否是scroll snap container , snap地是否严格() , 在哪个轴上实现snap效果。

2、scroll-snap-align

官方文档解释的好复杂，我也看不懂。

[ none | start | end | center ]

效果一

一个块被滚了一部分中途松手之后，页面自动滚回去或着自动滚到下一个块。，如下图所示：
在这里插入图片描述
这个应该算是css scroll snapping的最基本的用法了，
ul的样式中添加：

      scroll-snap-type: y mandatory;

li中添加样式：

      scroll-snap-align: start;

scroll-snap-type的属性值mandatory，使得当ul没有滚动的时候，会自动继续滚动到某个合适的li然后才停下来，
scroll-snap-align的属性值设置成了start, 看到的效果是：滚动的时候，‘赵’和‘李’都是部分出现在可视区域，但是松手后最后停留在了 “赵”，不过也可以设置成停留在下面的‘李’，就是效果二

效果二

和效果一相比的话，就是li的一个属性的变化而已。

 scroll-snap-align: end;

效果如下：
在这里插入图片描述

效果三

效果一和效果二都是一个是让滚动到可视区的第一个对齐留在可视区，另外一个是让滚动到可视区的最后一个对齐留在可视区，也可以实现让“孙”对齐，不管“赵”和‘李’会被滚出去多少。
li的样式修改为：

      scroll-snap-align: center;

这时可视区一共有5个li, ’孙‘是中间的那个。
效果如下图所示：
在这里插入图片描述

有空接着写。。。

参考文献：
https://www.w3.org/TR/css-scroll-snap-1/
https://css-tricks.com/practical-css-scroll-snapping/