Question

如果我在 div 中有溢出属性和宽（很多列）表的 div ，我将如何在第一个容器中放置另一个元素当我查看表格数据时向右/向左滚动时，可以看到 div 吗？

<div id="mainContainer" style="width:300px; overflow-x:auto">
    <div id="floatingContainer" style="border: 1px solid #ccc">Stay in the middle</div>
    <table>
    <tr>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
    </tr>
    </table>
</div>

可以只用CSS完成还是我需要添加一些jQuery？我想这就像位置：固定，除了相对于我放在它的div ...

Answer 1

也许是这样的？

http://jsfiddle.net/eeRMV/7/

在没有使用特定高度属性的情况下，我没有让它工作。

但是一些有更多经验的人可能知道这样做的方法而不添加特定的高度attr。三个元素（#mainContainer，＃floatingContainer，table）。

Answer 2

将你的表放在div中，为其设置宽度和高度，并使用css属性overflow：auto。这应该给你预期的结果

<div id="mainContainer" style="width:300px; overflow-x:auto">
<div id="floatingContainer" style="border: 1px solid #ccc">Stay in the middle</div>
<div style"height:100px;overflow: auto">   
  <table>
    <tr>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
    </tr>
  </table>

编辑：如果你想在整个容器上使用滚动条，你可以采用jQuery方式。

var floatingContainer = $('#floatingContainer');
$('#mainContainer').scroll(function(event) {
    floatingContainer.css('margin-left', event.currentTarget.scrollLeft);
});

这是demo on jsFiddle。

定位div以使其在滚动时可见

2 个答案: