如何仅使用 HTML、CSS 和 JavaScript 为大型表创建双水平滚动条？

Mammoth 表格的双水平滚动条

为了容纳巨大的表格，在顶部和底部启用水平滚动可以增强用户的可访问性。幸运的是，这只能通过 HTML 和 CSS 来实现。具体方法如下：

模拟上部滚动条

在表格上方创建一个水平滚动的“虚拟”div。将其高度设置为足以容纳滚动条。此虚拟元素将模拟顶部附加滚动条的外观。

同步滚动事件

将滚动事件处理程序附加到虚拟 div 和实际表格。当移动任一滚动条时，另一个元素应同步移动。这会产生具有两个独立水平滚动条的错觉。

代码片段

HTML:

<div class="wrapper1">
  <div class="div1"></div>
</div>
<div class="wrapper2">
  <div class="div2">
    <!-- Table Content -->
  </div>
</div>

CSS:

.wrapper1, .wrapper2 {
  width: 300px;
  overflow-x: scroll;
  overflow-y: hidden;
}
.wrapper1 { height: 20px; }
.wrapper2 { height: 200px; }
.div1 { width: 1000px; height: 20px; }
.div2 { width: 1000px; height: 200px; background-color: #88FF88; overflow: auto; }

JS:

$(function() {
  $(".wrapper1").scroll(function() {
    $(".wrapper2").scrollLeft($(".wrapper1").scrollLeft());
  });
  $(".wrapper2").scroll(function() {
    $(".wrapper1").scrollLeft($(".wrapper2").scrollLeft());
  });
});

使用此代码，您可以为用户提供双水平滚动条，即使在扩展页面上也可以更轻松地导航宽表格。

以上是如何仅使用 HTML、CSS 和 JavaScript 为大型表创建双水平滚动条？的详细内容。更多信息请关注PHP中文网其他相关文章！