Question

我正在尝试在纯CSS中创建滚动效果，其中“页面”会相互出现/滑动而不是像往常一样移入和移出屏幕。

我的意图是拥有一个父元素，它是位置相对和溢出滚动。其中包含“页面”的“窗口”。窗口隐藏了溢出，页面绝对位于父级的顶部，并且具有相同的大小。

如果这可以按预期工作，那么只有当窗口在视图中时才能看到页面。

实际上，我只是同时看到所有页面，忽略了父母的溢出隐藏属性，而它们远远超出了它的界限。

我曾经在野外见过这种效果，但我不记得在哪里和如何。有谁知道它是如何完成的？

html：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Newspaper Scroll Test</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
    <div id="content">
        <div class="post">
            <h3>Test</h3>
            <div>
            lorem ipsum dolor sit amet.
            </div>
        </div>
        <div class="post">
            <h3>Test</h3>
            <div>
            aap noot mies.
            </div>
        </div>
        <div class="post">
            <h3>Testje</h3>
            <div>
            fietspomp
            </div>
        </div>
        <div class="post">
            <h3>ttpttp</h3>
            <div>
            lorem ipsum dolor sit amet.
            </div>
        </div>
    </div>
</body>
</html>

css：

#content {
height: 200px;
width: 200px;
overflow: auto;
position: relative;
}

.post {
overflow: hidden;
height: 200px;
}

.post div {
position: absolute;
top: 50px;
left: 0;
}

.post h3 {
position: absolute;
top: 0;
left: 0;
}

Answer 1

我相信你会追求this is the effect。我对您的CSS所做的更改主要在.post类：

.post {
    overflow: hidden; 

    position: absolute;
    z-index: 1;
    top: 50px;
    left: 0;

    height: 200px;
    background: #fff;
}

我没有将嵌套的.post div设置为绝对位置，而是将整个.post设置为绝对值。这样您就可以堆叠每个内容帖子。我还添加了背景颜色，以便帖子不会互相显示。

要显示不同的页面，您只需将其z-index更改为高于1的值。

或者，如果您想要一个接一个地堆叠帖子的滚动效果，您可以按如下方式更改CSS：

.post {
    overflow: hidden;    
    height: 200px;
    background: #fff;
}

Answer 2

根本不是我想要的。这只会创建一堆帖子。我想要的是用语言解释非常复杂。

Pepjin，this你想做什么？

CSS滚动效果：溢出和位置问题

2 个答案: