Question

我通过多个问题，许多答案和解决方案，找到了一个几乎完美的问题（该元素的位置固定）。这是我的示例：

body {
  margin: 0;
}

p {
  margin: 0;
}

.panel {
  height: 90vh;
  width: 20vw;
  display: flex;
  flex-direction: column;
  top: 0;
  left: 100px;
  position: absolute;
  background-color: gray;
}
.best-sol {
  right: 0;
  left: auto;
}

.should-work .content-wrapper {
  position: relative;
}

.wrapper {
  width: 100%;
  overflow-y: auto;
  flex: 1;
}

.inner-scroll {
  background-color: aqua;
  display: flex;
  flex-direction: column;
}

.content-wrapper{
  width: 20px;
  height: 20px;
  background-color: yellow;
  display: flex;
  justify-content: flex-end;
}

.content {
  width: 200px;
  height: 10px;
  background-color: red;
  box-shadow: 0 0 10px black;
  position: absolute;
  display: flex;
  bottom: 0;
}

<body>
  <div class="panel should-work">
  <p>Should work</p>
    <div class="wrapper">
      <div class="inner-scroll">
        <div>a</div>
        <div>a</div>
        <div>a</div>
        <div>a</div>
        <div>a</div>
        <div>a</div>
        <div>a</div>
        <div>a</div>
        <div>a</div>
        <div>a</div>
        <div>a</div>
        <div>a</div>
        <div>a</div>
        <div>a</div>
        <div>a</div>
        <div>a</div>
        <div>a</div>
        <div>a</div>
        <div>a</div>
        <div>a</div>
        <div>a</div>
        <div>a</div>
        <div>a</div>
        <div>a</div>
        <div>a</div>
        <div>a</div>
        <div>a</div>
        <div>a</div>
        <div>a</div>
        <div>a</div>
        <div>a</div>
        <div>a</div>
        <div>a</div>
        <div>a</div>
        <div>a</div>
        <div>a</div>
        <div class="content-wrapper">
          <div class="content"></div>
        </div>
      </div>
    </div>
  </div>
  <div class="panel best-sol">
  <p>Best solution so far</p>
    <div class="wrapper">
      <div class="inner-scroll">
        <div>a</div>
        <div>a</div>
        <div>a</div>
        <div>a</div>
        <div>a</div>
        <div>a</div>
        <div>a</div>
        <div>a</div>
        <div>a</div>
        <div>a</div>
        <div>a</div>
        <div>a</div>
        <div>a</div>
        <div>a</div>
        <div>a</div>
        <div>a</div>
        <div>a</div>
        <div>a</div>
        <div>a</div>
        <div>a</div>
        <div>a</div>
        <div>a</div>
        <div>a</div>
        <div>a</div>
        <div>a</div>
        <div>a</div>
        <div>a</div>
        <div>a</div>
        <div>a</div>
        <div>a</div>
        <div>a</div>
        <div>a</div>
        <div>a</div>
        <div>a</div>
        <div>a</div>
        <div>a</div>
        <div class="content-wrapper">
          <div class="content"></div>
        </div>
      </div>
    </div>
  </div>
</body

理想情况下，滚动时.content不应停留在窗口底部。它应该出现在末尾。我想要的是让.content（红色框）离开滚动容器，但随滚动一起移动。

以上是最接近的解决方案。理想情况下（但也许我的想法是错误的），将内容包装器设置为相对位置应该可以解决该问题，但会减少内容。

有什么想法吗？

Answer 1

将内容CSS设置为-

.content {
    width: inherit;
    height: inherit;
    background-color: red;
    box-shadow: 0 0 10px black;
    bottom: 0;
}

它将按照您在“应该工作”示例中的显示方式进行操作。内容包装器中的宽度也应为200px。

.content-wrapper{
  width: 200px;
  height: 20px;
  background-color: yellow;
  display: flex;
  justify-content: flex-end;
}

溢流y：自动在左侧切割绝对定位的元素。在滚动条上移动元素的解决方案

1 个答案: