javascript - 如何在 overflow auto 中提出 div 元素？

Question

我有一个场景，我需要滚动条自动溢出，但我希望其中一个元素弹出。我做了一个演示，展示了我目前得到的东西。我希望在我的主容器上仍然有自动溢出功能的情况下，那个蓝色盒子不会落后。

我只能通过使蓝色框 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>

Answer 1

如果需要的话，这里有一个可用的解决方案。

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>

感谢所有帮助过的人:)