纯CSS实现全屏滚动效果

实现全屏滚动可以不依赖 JS, 只使用纯 CSS 实现, 不过只有较新版本的浏览器支持这一特性

主要使用了以下 CSS 属性

• scroll-snap-type: y mandatory; 给父元素设置, 设置贴合类型
• scroll-snap-align: start; 给子元素设置, 设置贴合点

<main>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</main>

容器布局

        <style>
            main {
                width: 100vw;
                height: 100vh;
                scroll-snap-type: y mandatory;
                overflow: scroll;
            }
            main div {
                border: black 2px solid;
                scroll-snap-align: start;
                width: 100vw;
                height: 100vh;
                background-color: skyblue;
            }
        </style>

样式设置