纯 CSS scroll-snap 仅适用于 body 作为容器答案

【问题标题】：Pure CSS scroll-snap only works with the body as the container纯 CSS scroll-snap 仅适用于 body 作为容器
【发布时间】：2018-12-31 13:39:29
【问题描述】：

我正在尝试使用纯 css 设置 捕捉滚动。

使用**捕捉滚动有一个容器，用于存放捕捉滚动处于活动状态的所有元素，其中包含滚动捕捉到的元素。

当我使用 body-tag 作为容器 和具有“部分”类的元素时，一切工作正常：

body {
    font-family: "Arial", sans-serif;
    margin: 0;
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
}

.section {
    height: calc(100vh - 14em);
    font-size: 1em;
    color: white;
    padding: 7em;
    margin: 0;
    scroll-snap-align: start;
}

.section:nth-of-type(1) {
    background-color: hsl(0, 100%, 30%);
}

.section:nth-of-type(2) {
    background-color: hsl(40, 100%, 30%);
}

.section:nth-of-type(3) {
    background-color: hsl(50, 100%, 30%);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Scroll-Snap Body</title>
    <link rel="stylesheet" href="scrollsnap_body.css">
</head>
<body>

<div class="section">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid aspernatur eius est fuga inventore
       officia possimus quibusdam recusandae sunt. Adipisci blanditiis corporis cupiditate dolorem ducimus
       excepturi laboriosam officia quae vero.</p>
</div>

<div class="section">
    <p>Accusamus amet dicta dolorum fugiat id itaque iure minus molestiae nesciunt non omnis quibusdam, veniam!
       Animi, aspernatur consectetur doloremque ducimus illum perferendis quam ut? Aspernatur deserunt doloremque
       error magnam minima.</p>
</div>

<div class="section">
    <p>Ab accusantium aut corporis, cumque dolor ducimus ea est, excepturi facere, fuga id labore magni minima nemo
       odio officia officiis quaerat quibusdam quo sit tempora tenetur unde veritatis! Doloremque, nam.</p>
</div>


</body>
</html>

但是当我尝试使用 带有“容器”类的单独 div 作为容器时，它不起作用：

body {
    font-family: "Arial", sans-serif;
    margin: 0;
    overflow-y: scroll;

}

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

.section {
    height: calc(100vh - 14em);
    font-size: 1em;
    color: white;
    padding: 7em;
    scroll-snap-align: start;
}

.section:nth-of-type(1) {
    background-color: hsl(0, 100%, 30%);
}

.section:nth-of-type(2) {
    background-color: hsl(40, 100%, 30%);
}

.section:nth-of-type(3) {
    background-color: hsl(50, 100%, 30%);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Scroll-Snap Container</title>
    <link rel="stylesheet" href="scrollsnap_container.css">
</head>
<body>

<div class="container">

    <div class="section">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid aspernatur eius est fuga inventore
           officia possimus quibusdam recusandae sunt. Adipisci blanditiis corporis cupiditate dolorem ducimus
           excepturi laboriosam officia quae vero.</p>
    </div>

    <div class="section">
        <p>Accusamus amet dicta dolorum fugiat id itaque iure minus molestiae nesciunt non omnis quibusdam, veniam!
           Animi, aspernatur consectetur doloremque ducimus illum perferendis quam ut? Aspernatur deserunt doloremque
           error magnam minima.</p>
    </div>

    <div class="section">
        <p>Ab accusantium aut corporis, cumque dolor ducimus ea est, excepturi facere, fuga id labore magni minima nemo
           odio officia officiis quaerat quibusdam quo sit tempora tenetur unde veritatis! Doloremque, nam.</p>
    </div>

</div>

</body>

这是为什么呢？

【问题讨论】：

标签： html css web scroll

【解决方案1】：

你快到了。默认情况下，<body> 元素的固定高度为100vh。您只需将其添加到您的 container 类中即可。

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

这使滚动条可以捕捉到。否则，<div class="container"> 的高度将等于所有子元素组合的高度，这不会为滚动提供固定窗口以捕捉到。

同样，如果您进行水平滚动，您需要为容器提供固定宽度。

【讨论】：