CSS实现吸附临近点效果探索：scroll-snap-type

七娃博客 2021-02-26 720人阅读

早上逛掘金社区，发一下一篇《纯 CSS 也能实现拖拽效果？》这样的文章，然后脑回路想到的是html5的拖拽，CSS？不会是标题党吧，再看署名：阅文前端团队，不得了了，然后不得不认真起来了！

我这篇不是讲拖拽的，在大佬的文章里面发现了一个新的知识点：Scroll Snap ——CSS吸附功能。

在线体验-Scroll Snap吸附效果：https://course.51qux.com/scrollsnap

Scroll Snap吸附效果实现必备条件：

0.滚动容器内部使用！！！

1.父级scroll-snap-type 吸附轴设置，默认不启用（none），可用参数如下：

scroll-snap-type:none | x | y | mandatory | proximity;
scroll-snap-type: none; /* 忽略临时点，不启用吸附 */
scroll-snap-type: x; /* 只捕捉其水平轴上的捕捉位置 */
scroll-snap-type: y; /* 只捕捉其垂直轴上的捕捉位置 */ 
scroll-snap-type: x mandatory; /*滚动结束吸附水平轴上的临近点*/
scroll-snap-type: y proximity;/*滚动结束，是临近点就吸附，不是就不吸附*/ 
...

更多参数前往MDN，地址见文章底部，ios端兼容需要在父盒子加入：

-webkit-overflow-scrolling:touch;

2.子元素scroll-snap-align 规定吸附位置，必须作用在子元素上，设置子元素临近点位置

scroll-snap-align: start | center | end;
scroll-snap-align:start /*子元素起始位置 作为 临近点*/
scroll-snap-align:end /*子元素结束位置 作为 临近点*/
scroll-snap-align:center /*子元素居中对齐-父盒子水平垂直居中位置*/

更多详细推荐阅读张鑫旭大佬的《大侠，请留步，要不过来了解下CSS Scroll Snap？》

3.scroll-snap-stop ，根据实际效果，这个属性可以理解为增加了阻尼系数，不添加的时候，使劲滚动一次，可以滚动好多个（3+），加上scroll-snap-stop:always，再使劲最多多滚动1~3个。

scroll-snap-stop:normal|always;
scroll-snap-stop:normal;/*默认值。可以忽略捕获位置*/
scroll-snap-stop:always;/*不能忽略捕获位置，不允许一次滚动多屏*/

案例实战

水平轴案例：

<style type="text/css">
 .scroll-box{
  width: 100%;height: 250px;white-space: nowrap;overflow-x: scroll;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling:touch;
 }
 .scroll-box .item{width: 300px;height: 200px;display: inline-block;margin-right: 15px;text-align: center;background: #333;font: 16px/200px "微软雅黑";color: #fff;
scroll-snap-align: start;
  scroll-snap-stop:always;
 }
 .scroll-box .item:nth-child(even){background: #666;}
        </style>
<div class="scroll-box">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
</div>

CSS实现吸附临近点效果探索：scroll-snap-type-QUI-Notes
应用场景：横向滚动商品、图片等位置

垂直案例：

<style type="text/css">
    .scroll-box-y{
    width: 100%;height: 250px;overflow-y: scroll;
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling:touch;
    }
    .scroll-box-y .item{width: 100%;height: 250px;display: inline-block;text-align: center;background: #333;font: 16px/250px "微软雅黑";color: #fff;
    scroll-snap-align: start;
    scroll-snap-stop:always;
    }
    .scroll-box-y .item:nth-child(even){background: #666;}
    </style>
<div class="scroll-box-y">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
</div>

CSS实现吸附临近点效果探索：scroll-snap-type-QUI-Notes
应用场景：全屏banner滚动