隐藏外部DIV上固定位置DIV的溢出-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，但由于在topPanel上有position:fixed，它忽略了该属性。

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

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

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

看这里的小提琴。请注意溢出到所有div容器右侧外部的"顶部"。

http://jsfiddle.net/3RLYm/

Answer 1

我认为问题在于您使用的是position:fixed；当您使用固定定位时，您将从文档的常规流中取出元素，并将其栓接到特定区域。完成此操作后，溢出属性将不再适用。在下面的示例中，我使用了"right"one_answers"left"属性来锁定"top"div的两侧，并删除了"width"。很明显，你必须调整这些价值观来满足你的需求，但这就是我要走的方向。

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

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