javascript - 在位置 :absolute header 顶部显示滚动条

Question

我有一个包装器，其内容在两个方向上都比它大。尝试在此处的表格上向任一方向滚动:https://we-flow.github.io/react-sticky-table/

垂直滚动条是可见的，正如我希望的那样，除了它隐藏在表格标题后面，直到您向下滚动一点。

水平滚动条仅在您一直滚动到底部后才可见，然后它的行为类似于垂直滚动条(隐藏在粘性列后面)。

很明显为什么会这样:粘性标题和列都是 position: absolute 并且 z-index 高于主要内容 div 溢出了它的父级。

我希望两个滚动条始终可见并位于粘性标题上方。我猜这在 CSS 中是不可能的，但也许 JS 有一个神奇的解决方案和这样的图书馆:https://github.com/malte-wessel/react-custom-scrollbars

表的基本结构是这样的:

<div style="position: relative; overflow: hidden;">
  <div style="position: absolute; z-index: 2;">Header</div>

  <div style="position: relative; overflow-y: auto; width: 100%;">
    <div style="position:absolute; z-index: 1;">Column</div>

    <div style="overflow-x: auto; height: 100%;">
       <div>Content that overflows in both directions</div>
    </div>
  </div>
</div>

我怎样才能做到这一点？

Answer 1

我想也许这种结构会更简单，并且可以满足您的需求。移除几层嵌套并使用边距。

<div style="position: relative; overflow: hidden;">

  <div style="position: relative; overflow: auto; width: 100%;">
    <div style="position: absolute; z-index: 2;">Header</div>
    <div style="position:absolute; z-index: 1;">Column</div>

    <div style="margin: header-size 0px 0px cell-size;" height: 100%;">
       <div>Content that overflows in both directions</div>
    </div>
  </div>
</div>

如果您绝对必须坚持您拥有的结构，那么，是的，当内容可滚动以修复垂直滚动条被遮挡时，您可以使用 javascript 更改标题的宽度，但是对于当前格式的水平滚动条，您无能为力，因为在 y 方向滚动的容器与在 x< 方向滚动的容器不同 方向。