如何在表格顶部创建重复的水平滚动条？

在表格顶部和底部复制水平滚动条

在表格底部创建水平滚动条是表格的常见要求宽度过大。然而，复制顶部的滚动条需要更具创新性的方法。

为了模拟顶部的第二个水平滚动条，解决方案涉及在原始表格上方创建一个“虚拟”div。这个虚拟 div 有一个水平滚动条，其大小精确地模仿原始滚动条的宽度。

接下来，事件处理程序将附加到虚拟 div 和原始表格以同步它们的滚动行为。每当移动其中一个滚动条时，另一个滚动条就会更新以保持对齐。效果是表格顶部的第二个水平滚动条。

以下代码说明了此技术：

HTML:

<code class="html"><div class="wrapper1">
  <div class="div1"></div>
</div>
<div class="wrapper2">
  <div class="div2">
    <!-- Content Here -->
  </div>
</div></code>

CSS:

<code class="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;
}</code>

JavaScript：

<code class="javascript">$(function(){
  $(".wrapper1").scroll(function(){
    $(".wrapper2").scrollLeft($(".wrapper1").scrollLeft());
  });
  $(".wrapper2").scroll(function(){
    $(".wrapper1").scrollLeft($(".wrapper2").scrollLeft());
  });
});</code>

通过采用此技术，开发人员可以使用纯 HTML、CSS 和 JavaScript 在表格顶部有效地创建重复的水平滚动条。

以上是如何在表格顶部创建重复的水平滚动条？的详细内容。更多信息请关注PHP中文网其他相关文章！