如何僅使用 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中文網其他相關文章！