css - 在外部 DIV 上隐藏固定位置 DIV 的 Overflow-x

Question

我有这样的布局:

<div class="mainContent" style="overflow-y: scroll !important; width: 100%">
  <div class="leftPanel" style="overflow: hidden; width: 225px;">
  </div>
  <div class="rightPanel" style="overflow: hidden;">
    <div class="dataPanel" style="width:21355px; height:3253px;">
      <div class="topPanel"  style="position:fixed; width:21355px;">
      </div>
      <div class="bottomPanel">
      </div>
    </div>
  </div>
</div>

topPanel 需要处于固定位置，这样它就不会随着 mainContent 中包含的其余数据垂直(y 轴)滚动，但 topPanel 还需要沿 x 轴保持在 rightPanel 的范围内.我尝试在每个外部 div 上使用 overflow-x: hidden 但由于 position:fixed 在 topPanel 上，它忽略了该属性。

我已经搜索了一段时间，我找到的最接近的解决方案是使用:

clip: rect(0px 750px 900px 0px);

这会切断 topPanel 沿 x 轴的溢出，但如果用户向左或向右滚动(他们会这样做)，则每次都需要重新调整，这似乎不是一个合理的解决方案。

请看这里的 fiddle 。请注意溢出到所有 div 容器右侧的“Top”。

http://jsfiddle.net/3RLYm/

Answer 1

我认为问题在于您使用的是 position:fixed;当您使用固定定位时，您是在将元素从文档的常规流中取出并将其固定到特定区域。完成此操作后，溢出属性将不再适用。在下面的示例中，我使用了“右”和“左”属性来锁定“顶部”div 的两侧并删除了“宽度”。显然，您必须调整这些值以满足您的需求，但这是我要走的方向。

topPanel
{
position: fixed;
right: 10px;
left: 250px;
border: solid 4px purple;
}

http://jsfiddle.net/3RLYm/35/