早上逛掘金社区,发一下一篇《纯 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-Note
应用场景:横向滚动商品、图片等位置

垂直案例:

<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-Note
应用场景:全屏banner滚动

Scroll Snap兼容

兼容性的话,很一般,毕竟是一个css新属性,目前的话才60%的浏览器支持,还是要慎用!如下:
CSS实现吸附临近点效果探索:scroll-snap-type-Qui-Note

本文参考
1.MDN:《scroll-snap
2.张鑫旭:《大侠,请留步,要不过来了解下CSS Scroll Snap?
3.阅文前端团队:《纯 CSS 也能实现拖拽效果?