在位置顶部显示滚动条:绝对标题

Question

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

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

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

很明显为什么会发生这种情况：粘性标题和列都是position: absolute的，并且比溢出其父级的主要内容div具有更高的z-index。

我希望两个滚动条始终可见，并且在粘性标题上方。我的猜测是这在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方向滚动的容器不同。