javascript - 将 DIV 元素绑定(bind)到溢出滚动条

Question

我正在尝试创建一个允许我修复标题的数据网格表。我已将表格放置在两个 DIV 元素中并修复了表格的 THEAD 部分。我动态填充表格，每次可以有不同数量的列并且可能有不同的宽度。

<DIV style="position: relative; width="500px">
 <DIV style="height:105px; overflow: auto;">
  <TABLE width="502px">
    <THEAD>
      <TR style="left:-1px;top: 0;position: absolute;">
        ... header content ...
      </TR>
    </THEAD>
    <TBODY>
      ... data columns ...
    </TBODY>
  </TABLE>
 </DIV>
</DIV>

该解决方案适用于垂直溢出。但是，我正在为水平溢出而苦苦挣扎。因为我固定了THEADs TR元素，如果我的表格超过DIV宽度，就会出现水平滚动条，我可以水平滚动数据，但是标题是静态的，不滚动。

我在想，如果我可以获得动态创建的滚动条的 ID/名称，我也许可以使用 jQuery 以某种方式滚动表头，但我不知道这是否是正确的解决方案，或者它是否均匀可能。

Answer 1

很多人都尝试过使用 html 和 css 为表格制作固定的标题和左列，它们在您滚动时保持不变，但遗憾的是它不起作用。

您唯一的选择是使用 javascript 在表格滚动时对其进行操作。我没有具体的代码可以推荐，但可以进行一些谷歌搜索。