仅使用 HTML 和 CSS 可以在表格顶部创建第二个水平滚动条吗？

模仿表格顶部的第二个水平滚动条

问题：

用水平增强一个巨大的表格需要底部的滚动条。然而，也寻求在顶部复制此滚动条。纯粹使用 HTML 和 CSS 来完成此任务是否可行？

解决方案：

利用“虚拟”div 模拟元素上方的第二个水平滚动条。这个虚拟 div 直接位于主元素的顶部，其大小足以容纳滚动条。通过将事件处理程序附加到虚拟元素和主元素，可以确保使用任一滚动条时的同步。虚拟 div 复制了第二个顶部滚动条的外观和功能。

实时示例：

探索这个小提琴以获得实用的效果演示。

代码：

HTML：

<div class="wrapper1">
  <div class="div1"></div>
</div>
<div class="wrapper2">
<div class="div2">
  <!-- Content Here -->
</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 可以在表格顶部创建第二个水平滚动条吗？的详细内容。更多信息请关注PHP中文网其他相关文章！