我的页面上有一个非常大的 table
。所以我决定在表格底部放一个水平滚动条。但我希望这个滚动条也位于桌面的顶部。
我在模板中的内容是这样的:
<div style="overflow:auto; width:100%; height:130%">
<table id="data" style="width:100%">...</table>
</div>
仅在 HTML 和 CSS 中可以做到这一点吗?
原文由 psoares 发布,翻译遵循 CC BY-SA 4.0 许可协议
要在元素顶部模拟第二个水平滚动条,请在具有水平滚动的元素上方放置一个“虚拟”
div
,其高度足以容纳滚动条。然后为虚拟元素和真实元素附加“滚动”事件的处理程序,以便在移动任一滚动条时使另一个元素同步。虚拟元素看起来像真实元素上方的第二个水平滚动条。一个活生生的例子,看 这个小提琴
这是代码:
HTML:
CSS:
JS: