今天看mdn的css模块,发现一个scroll-snap属性;
这个属性能让用户滚动页面的时候,页面停留在我们想给用户看到的一个地方;
说人话就是,让内容更易到达我们想到达的位置;
基本使用方法
<article class="scroller"> <section> <h2>Section one</h2> </section> <section> <h2>Section two</h2> </section> <section> <h2>Section three</h2> </section> </article>
.scroller { height: 300px; overflow-y: scroll; scroll-snap-type: y mandatory; } .scroller section { scroll-snap-align: start; }
scroll-snap-type属性规定了两个值: 方向 , 滚动效果;大家更具需要用;不同的是滚动的不同位置两个值对页面有不同的表现;
原文是:You can also pass in the keywords mandatory
, or proximity
. The mandatory
keyword tells the browser whether the content has to snap to a certain point, no matter where the scroll is. The proximity
keyword means that it may snap to the point, but does not have to.
来源: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap/Basic_concepts