使用 sroll-snap-type 优化滚动

Posted 2020-11-24 zxh-null

scroll-snap-type：属性定义在滚动容器中的一个临时点如何被严格的执行。

简单而言，这个属性规定了一个容器是否对内部滚动动作进行捕捉，并且规定了如何处理滚动结束状态。

语法：

{

　　scroll-snap-type:none | [ x | y | block | inline | both | ] [ mandatory | proximity ] ?

}

举个栗子呀：假设，我们希望一个横向可滚动容器，每次滚动之后，子元素最终的停留位置不是尴尬的被分割，而是完整的呈现在容器内，可以这样写。

<style>
     ul{
         scroll-snap-type:x mandatory;
         }

     li{
        scroll-snap-align:center;
     }
</style>

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>    

上面scroll-snap-type:x mandatory中，x表示捕捉x轴方向上的滚动，mandatory表示强制将滚动结束后的元素的停留位置到我们规定的地方

如果是y轴方向的滚动也是一样的，只需要简单改一下 ul的scroll-snap-type:y mandatory;即可。

由于目前对该技术的了解，只能帮大家解析到此了，如果还需要了解更多，请努力的程序猿，亲自到掘金官网查询一下吧！