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中文网其他相关文章！
