我正在尝试在纯 CSS 中创建滚动效果，其中“页面”出现/相互滑动，而不是像往常一样移入和移出屏幕。
我的意图是拥有一个相对位置和溢出滚动的父元素。里面是包含“页面”的“窗口”。窗口隐藏了溢出，页面绝对位于父级的顶部，并且具有相同的大小。
如果这能按预期工作，您将只能在页面窗口处于 View 中时看到该页面。
实际上，我只是同时看到所有页面，忽略了它们父级的溢出隐藏属性，而它们远远超出了它的边界。
我曾经在野外看到过这种效果，但我不记得在哪里以及如何看到的。有谁知道它是怎么做到的吗？
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;
}
最佳答案
我相信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;
}
关于CSS 滚动效果 : overflow and position troubles，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3396299/