关于 CSS 中 scroll-snap 未生效

约 143 字小于 1 分钟

2024-11-03

无法生效

<body>
    <div class="header">

    </div>
    <div id="container" class="container">
        <div id="page1" class="pages" style="background-color: aqua">

        </div>
        <div id="page2" class="pages" style="background-color: #3c71b5">

        </div>
        <div id="page3" class="pages" style="background-color: #2422bf">

        </div>
    </div>
</body>

.pages {
    height: 100vh;
    width: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.container {
    scroll-snap-type: y mandatory;
    overflow-y: auto;
}

此时F12发现有吸附点，但并没有吸附，原因是直接父容器没有给予高度

实现！！

.pages {
    height: 100vh;
    width: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

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