如何为大表实现双水平滚动条？

大型表格的双水平滚动条

问题：

在页面上遇到一个大表格，用户寻求实现顶部和底部水平滚动条以方便导航。

使用 HTML 和 CSS 实现：

为了实现所需的功能，采用了创造性的方法。 “虚拟”div 位于表格上方，渲染得足够高以容纳滚动条。虚拟 div 和表格都分配了水平滚动功能。

代码细分：

HTML：

<code class="html"><div class="wrapper1">
  <div class="div1"></div>
</div>
<div class="wrapper2">
  <div class="div2">
    <!-- Table Content -->
  </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="js">$(function() {
  $(".wrapper1").scroll(function() {
    $(".wrapper2").scrollLeft($(".wrapper1").scrollLeft());
  });
  $(".wrapper2").scroll(function() {
    $(".wrapper1").scrollLeft($(".wrapper2").scrollLeft());
  });
});</code>

函数：

• 虚拟 div (.div1) 模拟顶部滚动条并充当不可见的占位符。
• 实际表格 (.div2) 包含表格内容并启用水平滚动。
• JavaScript事件处理程序确保当任一滚动条移动时，另一个滚动条同步移动。

现场示例：

有关现场演示，请参阅提供的小提琴。

以上是如何为大表实现双水平滚动条？的详细内容。更多信息请关注PHP中文网其他相关文章！