修正了可滚动外部的内部div

Question

我在一个React web应用程序中有一些页面内容，当用户滚动时，某些字段应该保持固定。让我感到困惑的是，这些内容包含在一个可滚动的外部div中。外部div必须保持可滚动，因为它偶尔会加载需要它的不同组件。

下面是div结构:

<div class="inner"><!-- overflow-y: auto; (this must remain)-->

  <div class="wrapper">
    <div class="titleBar"> <!-- I need this to not scroll -->
      <div class="mainTable">
        <table>
          <th>...</th> <!-- I need this to not scroll -->
          <tbody>
            ...
          </tbody>
        </table>
      </div>
    </div>
  </div>

</div>

因此当用户向下滚动页面时，标题栏和表头应该保持不变，而表体内容是页面上唯一滚动的内容。我不能仅仅使表体可滚动，因为这将把一个滚动条放在表本身，它需要在实际的页面滚动。

我所能找到的大多数关于这方面的文章都使用了JQuery，但由于它在ReactJS中，我正在寻找其他解决方案。

Answer 1

正确的台面结构为:

<table>
  <thead>
    <tr>
      <th></th>
      <th></th>
    </tr>
  </thead>
</table>

然后尝试按以下方式自定义head th css:

thead th {
  position:sticky;
  top: 0
}