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>

感谢所有帮助过的人:)

如何在溢出自动中提出div元素？

1 个答案: