使用 sroll-snap-type 优化滚动

Posted zxh-null

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用 sroll-snap-type 优化滚动相关的知识,希望对你有一定的参考价值。

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;即可。

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

以上是关于使用 sroll-snap-type 优化滚动的主要内容,如果未能解决你的问题,请参考以下文章

Android 滚动RecyclerView加载图片时的流畅度优化

实现图片滚动加载以及排版优化

从dfs暴力->记忆化->子集背包dp->滚动数组优化

电力系统基于matlab多时间尺度滚动优化的多能源微网双层调度模型含Matlab源码 2281期

交互优化--如何使移动端滚动更加流畅

滚动优化