时间戳

首页 > 解决方案 > 溢出-y：自动剪切左侧绝对定位的元素。在滚动上移动元素的解决方案

html - 溢出-y：自动剪切左侧绝对定位的元素。在滚动上移动元素的解决方案

问题描述

我经历了多个问题、许多答案和解决方案，并找到了一个几乎完美的解决方案（元素行为固定定位）。这是我的例子：

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，红色框超出滚动容器，但随着滚动移动。

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

有任何想法吗？

标签： htmlcss

解决方案

将内容 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;
}

推荐阅读