html - CSS - 在能够滚动时定位绝对溢出父级
问题描述
我正在尝试加载大量水平滚动的 div。每个 div 都是绝对定位的(在我的示例中为红色框),因此它在滚动容器之外可见。我有一个运行良好的示例,但似乎我失去了滚动的能力。滚动条出现,但滚动它不会移动 div。
通过添加相对于整个容器的位置,我可以让 div 滚动,但它们不会显示在容器之外。
请帮助我能够在容器外显示内容但保持可滚动性。
<div style="overflow-x:scroll; height:40px; white-space: nowrap; background:black;">
<div style="display:inline-block; margin-left:50px; width:500px; height:40px">
<div style="border:1px solid black; height:40px; width:500px; position:absolute">
<div style="position:absolute; height:100px;width:500px; background:Red; top:5px; left:5px"></div>
</div>
</div>
<div style="display:inline-block; margin-left:50px; width:500px; height:40px">
<div style="border:1px solid black; height:40px; width:500px; position:absolute">
<div style="position:absolute; height:100px;width:500px; background:Red; top:5px; left:5px"></div>
</div>
</div>
<div style="display:inline-block; margin-left:50px; width:500px; height:40px">
<div style="border:1px solid black; height:40px; width:500px; position:absolute">
<div style="position:absolute; height:100px;width:500px; background:Red; top:5px; left:5px"></div>
</div>
</div>
<div style="display:inline-block; margin-left:50px; width:500px; height:40px">
<div style="border:1px solid black; height:40px; width:500px; position:absolute">
<div style="position:absolute; height:100px;width:500px; background:Red; top:5px; left:5px"></div>
</div>
</div>
<div style="display:inline-block; margin-left:50px; width:500px; height:40px">
<div style="border:1px solid black; height:40px; width:500px; position:absolute">
<div style="position:absolute; height:100px;width:500px; background:Red; top:5px; left:5px"></div>
</div>
</div>
</div>
解决方案
我稍微编辑了您的代码片段并向黑色容器添加了一个类,以便使用以下方法轻松设置其直接子项的样式:
.container > div {
border: 1px solid green;
}
.container > div {
border: 1px solid green;
}
<div class="container" style="overflow-x:scroll; height:40px; white-space: nowrap; background:black;">
<div style="display:inline-block; margin-left:50px; width:500px; height:40px">
<div style="border:1px solid black; height:40px; width:500px; position:absolute">
<div style="position:absolute; height:100px;width:500px; background:Red; top:5px; left:5px"></div>
</div>
</div>
<div style="display:inline-block; margin-left:50px; width:500px; height:40px">
<div style="border:1px solid black; height:40px; width:500px; position:absolute">
<div style="position:absolute; height:100px;width:500px; background:Red; top:5px; left:5px"></div>
</div>
</div>
<div style="display:inline-block; margin-left:50px; width:500px; height:40px">
<div style="border:1px solid black; height:40px; width:500px; position:absolute">
<div style="position:absolute; height:100px;width:500px; background:Red; top:5px; left:5px"></div>
</div>
</div>
<div style="display:inline-block; margin-left:50px; width:500px; height:40px">
<div style="border:1px solid black; height:40px; width:500px; position:absolute">
<div style="position:absolute; height:100px;width:500px; background:Red; top:5px; left:5px"></div>
</div>
</div>
<div style="display:inline-block; margin-left:50px; width:500px; height:40px">
<div style="border:1px solid black; height:40px; width:500px; position:absolute">
<div style="position:absolute; height:100px;width:500px; background:Red; top:5px; left:5px"></div>
</div>
</div>
</div>
现在您应该能够看到滚动实际上是有效的,但仅适用于绿色 div。其他元素(黑色边框 div 和红色 div)没有滚动,因为它们有position: absolute;
. 这意味着它们被从文档流中取出,并且由于没有其他元素具有position: relative
,它们相对于正文是绝对的。这就是为什么,如果您使用主滚动条滚动,它们实际上会滚动。
您可以添加position: relative;
到容器中,但是正如您所说,这样做,元素不会溢出容器。
据我所知,仅使用 css 无法解决此问题,您可能必须让它们滚动浏览一些 Javascript。
一个非常基本的例子:
const container = document.querySelector('.container');
const boxes = document.querySelectorAll('.box');
container.addEventListener('scroll', (e) => {
let offset = e.target.scrollLeft;
for(let box of boxes) {
box.style.transform = `translateX(${offset}px)`;
}
});
.container > div {
border: 1px solid green;
}
.fake-width {
width: 2000px;
}
.boxes {
display: flex;
}
.box {
background: blue;
}
.box + .box {
margin-left: 50px;
}
<div class="container" style="overflow-x:scroll; height:40px; white-space: nowrap; background:black;">
<div class="fake-width"></div>
</div>
<div class="boxes">
<div class="box box-1" style="display:inline-block; margin-left:50px; width:500px; height:40px">
</div>
<div class="box box-2" style="display:inline-block; margin-left:50px; width:500px; height:40px">
</div>
<div class="box box-3" style="display:inline-block; margin-left:50px; width:500px; height:40px">
</div>
</div>
</div>
如您所见,如果您走这条路线,您甚至不需要将 div 保留在滚动容器内。您可以,具体取决于您要构建的内容,但您不需要这样做。
推荐阅读
- django - django 队列中的第二个请求,直到第一个请求完成
- sql - SQL - 喜欢和大于函数
- r - 在 fcase 中处理 NA 值的函数之间的 data.table
- sql - 我怎样才能最简单地在 Windows 中自动执行 Oracle 查询?
- sockets - 协程动画盒
- javascript - 如何获取未格式化的列表并将其格式化为 Javascript
- javascript - 检查一个数的整除性的基本练习
- reactjs - Mobx 异步示例在操作后不呈现结果
- java - 如何在没有 Rcon 访问权限的情况下检索在线玩家的 Steam ID?
- php - 服务器上的文件更改时刷新页面