标签: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;即可。
由于目前对该技术的了解,只能帮大家解析到此了,如果还需要了解更多,请努力的程序猿,亲自到掘金官网查询一下吧!
标签:line 一个 inline 技术 div color 容器 属性 ack
原文地址:https://www.cnblogs.com/ZXH-null/p/11997484.html