我有一个场景,我需要滚动条自动溢出,但我希望其中一个元素弹出。我做了一个演示,展示了我目前得到的东西。我希望在我的主容器上仍然有自动溢出功能的情况下,那个蓝色盒子不会落后。
我只能通过使蓝色框 position: fixed
来让它工作,但那样我就无法将它与我的红色 div 对齐。
应该怎么做?
html,
body {
padding: 0;
margin: 25px 0;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans,
Helvetica Neue, sans-serif;
text-align: center;
background: #091c32;
color: #fff;
}
.scroll {
border: 5px solid #000;
padding: 0 10px;
max-width: 250px;
margin: 0 auto;
max-height: 400px;
overflow: auto;
}
.box {
position: relative;
width: 100%;
height: 205px;
border: 2px solid #000;
background: red;
margin: 10px 0;
}
.innerBox {
position: absolute;
width: 150px;
height: 50px;
border: 2px solid #fff;
background: blue;
top: 0;
left: 0;
transform: translate(-50%, -50%);
z-index: 1000;
}
<div class="scroll">
<div class="box">
<div class="innerBox">Hello</div>
</div>
<div class="box">
<div class="innerBox">World</div>
</div>
</div>
编辑:
应用@chazsolo 建议的 css 技巧后,我发现我仍然有一个问题,即滚动时蓝色框不跟随红色框。
但除此之外,它让我意识到还有一个更大的问题需要解决;它能够隐藏 .scroll
div 下方的那些蓝色框。
这是更新后的代码:
html,
body {
padding: 0;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans,
Helvetica Neue, sans-serif;
text-align: center;
background: #091c32;
color: #fff;
}
a {
color: inherit;
text-decoration: none;
}
* {
box-sizing: border-box;
}
.scroll {
border: 5px solid #000;
padding: 0 10px;
max-width: 250px;
margin: 0 auto;
max-height: 400px;
overflow: auto;
}
.box {
position: relative;
width: 100%;
height: 205px;
border: 2px solid #000;
background: red;
margin: 10px 0;
position: static;
}
.innerBox {
position: absolute;
width: 150px;
height: 50px;
border: 2px solid #fff;
background: blue;
// top: 0;
// left: 0;
transform: translate(-50%, -50%);
}
<div class="scroll">
<div class="box">
<div class="innerBox">Hello</div>
</div>
<div class="box">
<div class="innerBox">World</div>
</div>
<div class="box">
<div class="innerBox">Hello</div>
</div>
<div class="box">
<div class="innerBox">World</div>
</div>
</div>
最佳答案
如果需要的话,这里有一个可用的解决方案。
const scrollBox = document.querySelector('.scroll');
const boxes = document.querySelectorAll('.innerBox');
scrollBox.addEventListener('scroll', e => {
boxes.forEach(box => {
const top = box.parentElement.offsetTop;
const bHH = box.offsetHeight / 2;
box.style.top = `${top - e.target.scrollTop + bHH}px`;
});
});
html,
body {
padding: 0 25px;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
text-align: center;
background: #091c32;
color: #fff;
}
.container {
overflow: hidden;
position: relative;
}
.scroll {
border: 5px solid #000;
padding: 0 10px;
max-width: 250px;
margin: 0 auto;
max-height: 400px;
overflow: auto;
}
.box {
width: 100%;
height: 205px;
border: 2px solid #000;
background: red;
margin: 10px 0;
}
.innerBox {
position: absolute;
width: 150px;
height: 50px;
border: 2px solid #fff;
background: blue;
transform: translate(-50%, -50%);
}
<h1>Lorem Ipsum</h1>
<div class="container">
<div class="scroll">
<div class="box">
<div class="innerBox">Hello</div>
</div>
<div class="box">
<div class="innerBox">World</div>
</div>
<div class="box">
<div class="innerBox">Hello</div>
</div>
<div class="box">
<div class="innerBox">World</div>
</div>
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam non dapibus risus.</p>
感谢所有帮助过的人:)
关于javascript - 如何在 overflow auto 中提出 div 元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66923588/