使得页面滚动到用户想看到的位置

今天看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