Question

我正在尝试使用纯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>

那是为什么？

Answer 1

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

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

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

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

纯CSS滚动捕捉仅将主体用作容器

1 个答案: