纯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>

样式设置