文章/答案/技术大牛

发布

社区首页 >问答首页 >纯CSS滚动-只对主体作为容器起作用。

问纯CSS滚动-只对主体作为容器起作用。
EN

Stack Overflow用户

提问于 2018-12-30 21:48:01

回答 1查看 887关注 0票数 1

我正在尝试用纯css设置一个快照卷轴。

有了**抓取卷轴，就有一个容器来容纳所有的元素，在这些元素上，抓取滚动是活动的，包含滚动所连接的元素。

当我使用body-标记作为容器和带有类“节”的元素时，可以很好地使用。

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>

为什么会这样呢？

web

scroll

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-12-31 05:39:29

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

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

这就给了卷轴一些可以抓取的东西。否则，<div class="container">将有一个等于所有子元素之和的高度，这不会给滚动框一个固定的窗口。

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

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/53981699

复制

相似问题

问纯CSS滚动-只对主体作为容器起作用。
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问纯CSS滚动-只对主体作为容器起作用。EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问纯CSS滚动-只对主体作为容器起作用。
EN