如何将水平滚动条与 div 元素分离并将其放入另一个水平位置 - 反应表案例?

Question

我有一个反应表，我正在尝试放入页面，以便标题行处于固定的垂直位置。反应表的内容由垂直浏览器滚动控制，但水平位置由反应表的水平滚动控制，请参见代码：https://codesandbox.io/s/reacttable-simple-table-euzqs

固定标题行是通过 React 表中的代码实现的，浏览器滚动时带有静态标题

.ReactTable {
margin-top: 74px;
}
.ReactTable .rt-tbody {
margin-top: 30px;
}
.ReactTable .rt-thead {
background-color: white;
position: fixed;
top: 1;
z-index: 1;
width: calc(100% - 17px);
height: 31px;
}

但是水平滚动是通过样式/宽度属性实现的：

<ReactTable
data={data}
style={{ width: "50%" }}
</ReactTable>

可以看到，水平滚动始终保持在页面的末尾，并且只有在达到内容页面底部的情况下，此水平滚动条才可见。但我想将水平滚动始终放置在浏览器可见空间的底部。是否有可能以某种方式实现这一点 - 将滚动条与元素分离并将其放置在另一个位置，或者使原始滚动条不可见并通过屏幕上所需位置的一些假滚动条控制反应表的位置？欢迎任何正确方向的提示，也许我可以自己解决细节。

Answer 1

我无法在这里为您的情况列出确切的修复方法，但您可以重新设计"固定标头"以使用本文中描述的方法......

https://uxdesign.cc/position-stuck-96c9f55d9526。

这会使用带有顶部偏移量的position: sticky，然后同步表格和粘性标题之间的水平滚动。

完成此操作后，您应该知道如何在自定义的滚动条拇指元素上使用带有底部偏移量的position: sticky，该元素将始终粘在表格的底部边缘，例如标题。同样，您可以将它自己的位置/移动同步到表格的水平滚动位置。