码迷,mamicode.com
首页 > 其他好文 > 详细

使用 sroll-snap-type 优化滚动

时间:2019-12-06 21:43:05      阅读:117      评论:0      收藏:0      [点我收藏+]

标签:line   一个   inline   技术   div   color   容器   属性   ack   

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 优化滚动

标签:line   一个   inline   技术   div   color   容器   属性   ack   

原文地址:https://www.cnblogs.com/ZXH-null/p/11997484.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!