Question

我需要一个具有固定宽度的容器，并且其中的一个元素可以在该固定宽度内滚动。问题是我需要超出固定宽度容器范围的内容是可见的。有人知道如何实现这一目标吗？

我正在描述的情况的简笔画：https://codepen.io/anon/pen/zyZOjM

.outer {
  background: red;
  width: 400px;
  height: 800px;
}

.inner {
  background: blue;
  max-width: 200px;
  margin: auto;
  overflow-x: scroll;
  height: 300px;
  color: white;
}

.element {
  background: green;
  width: 800px;
  height: 100px;
}

<div class="outer">
  <div class="inner">
    <div class="element">Initially, this element should overflow all the way off the edge of the red (exactly how it does when overflow is set to visible). It should be scrollable, though (how it is when overflow is set to scroll) and when you scroll all the way to the right,
      the right of the green should end at the same place is does now (right edge of the blue).</div>
  </div>
</div>

我很沮丧。这可能有一个简单的解决方案，但我一直在拔头发。

Answer 1

这是要实现的目标吗？

.container1 {
  background: red;
  width:400px;
  height:800px;

}

.doop1 {
  background:blue;
  max-width: 200px;
  margin:auto;
  overflow: auto;
  height:300px;
  overflow-Y: hiddden;
}

.doop2 {
  background:green;
  width:800px;
  height:100px;
}

#overflow-text{
  display: block;
  width: 190px;
  position:fixed;
}


<div class="container1">
  <div class="doop1">
    <div class="doop2">
      <p id="overflow-text">
      Initially, this element should overflow all the way to the edge of the red. When you scroll all the way to the right, the green should end at the same place is does now (edge of the blue).
        </p>
    </div>
  </div>
</div>

如何使可滚动元素的溢出超出固定宽度容器的边界仍可见？

1 个答案: