两句css代码实现全屏滚动效果-demo案例

效果

两句css代码实现全屏滚动效果

html代码

<body>
    <div class="container">
        <section>
            <h3>第一屏内容</h3>
            <p>
                在父容器上使用scroll-snap-type 属性 <br>
                第一个参数y 是y轴捕捉位置 <br>
                mandatory 超过距离则自动滚动到下一个容器 <br>
                scroll-snap-type:y mandatory <br>

                在需要滚动的容器上使用 scroll-snap-align 属性 <br>
                start 开始部分 end 结束部分 center 中间部分 <br>
                scroll-snap-align:start; <br>
            </p>
        </section>
        <section>
            <h3>第二屏内容</h3>
            <p>
                在父容器上使用scroll-snap-type 属性 <br>
                第一个参数y 是y轴捕捉位置 <br>
                mandatory 超过距离则自动滚动到下一个容器 <br>
                scroll-snap-type :y mandatory <br>

                在需要滚动的容器上使用 scroll-snap-align 属性 <br>
                start 开始部分 end 结束部分 center 中间部分 <br>
                scroll-snap-align:start; <br>
            </p>
        </section>
        <section>
            <h3>第三屏内容</h3>
            <p>
                在父容器上使用scroll-snap-type 属性 <br>
                第一个参数y 是y轴捕捉位置 <br>
                mandatory 超过距离则自动滚动到下一个容器 <br>
                scroll-snap-type :y mandatory <br>

                在需要滚动的容器上使用 scroll-snap-align 属性 <br>
                start 开始部分 end 结束部分 center 中间部分 <br>
                scroll-snap-align:start; <br>
            </p>
        </section>
    </div>
</body>

css代码

<style>
    body {
        margin: 0;
    }

    .container {
        height: 100vh;
        overflow-y: scroll;
        scroll-snap-type: y mandatory;
    }

    section {
        box-sizing: border-box;
        padding: 112px;
        height: 100%;
        color: white;
        scroll-snap-align: start;
    }

    section:nth-of-type(1) {
        background-color: #60af15;
    }

    section:nth-of-type(2) {
        background-color: #158baf;
    }

    section:nth-of-type(3) {
        background-color: #af1581;
    }
</style>