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

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

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

上一篇:基础篇——CHAPTER 02


下一篇:Pocket Book CodeForces - 152C