Question

我有一个内容比两个方向都要大的包装器。尝试在桌面上向任意方向滚动：https://we-flow.github.io/react-sticky-table/

垂直滚动条是可见的，除了它隐藏在桌面标题后面，直到你向下滚动一点。

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

很清楚为什么会发生这种情况：粘性标题和列都是position: absolute，而且z-index比溢出其父级的主要内容div更高。< / p>

我希望两个滚动条始终可见并位于粘贴标题之上。我的猜测是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方向滚动的容器与＆＃的滚动条不同39;在x方向滚动。

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

1 个答案: