时间戳

首页 > 解决方案 > 纯 CSS scroll-snap 仅适用于 body 作为容器

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

问题描述

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

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

当我将body-tag 用作容器和带有“section”类的元素时，一切正常：

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>

这是为什么？

标签： htmlcsswebscroll

解决方案

您快到了。默认情况下，<body>元素的固定高度为100vh. 您只需要将相同的内容添加到您的container课程中。

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

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

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

推荐阅读