如何使用 HTML、CSS 和 JavaScript 为表格创建双水平滚动条（顶部和底部）？

在表格的顶部和底部创建水平滚动条

如果大表格超出可见的浏览器窗口，通常需要有滚动条在顶部和底部有效地导航整个表格内容。

在纯 HTML 和 CSS 中，这可以通过模拟来实现顶部的第二个水平滚动条。操作方法如下：

1. 创建一个虚拟 Div：

   在表格上方添加一个 div 元素，并设置其高度足以创建外观滚动条（例如， 20px)。

2. 禁用垂直滚动：

   为虚拟 div 和表格的父 div 设置溢出-y: 隐藏以限制滚动到水平方向axis.

3. 启用水平滚动：

   设置overflow-x：滚动虚拟div和表格的父div以启用水平滚动两个都

4. 同步滚动条：

   通过将事件侦听器附加到滚动事件，利用 JavaScript 来同步虚拟 div 和表格的滚动。当一个滚动条移动时，另一个滚动条也会相应地调整。

这是一个将虚拟 div 放在表格父级顶部的示例div:

HTML:

<div class="table-wrapper">
  <div class="dummy-scrollbar"></div>
  <div class="data-table">
<p><strong>CSS:</strong></p>
<pre class="brush:php;toolbar:false">.table-wrapper {
  height: 130%;
  overflow: auto;
  width: 100%;
}

.dummy-scrollbar {
  height: 20px;
  width: 100%;
  overflow-x: scroll;
  overflow-y: hidden;
}

.data-table {
  overflow-x: scroll;
  overflow-y: visible;
  width: 100%;
}

JavaScript:

$(".table-wrapper").scroll(function() {
  $(".dummy-scrollbar").scrollLeft($(this).scrollLeft());
});

$(".dummy-scrollbar").scroll(function() {
  $(".table-wrapper").scrollLeft($(this).scrollLeft());
});

通过实施这种方法，您可以创建桌面上有第二个水平滚动条的错觉，增强了导航和可访问性。