首頁 >web前端 >css教學 >如何僅使用 HTML、CSS 和 JavaScript 為大型表建立雙水平捲軸?

如何僅使用 HTML、CSS 和 JavaScript 為大型表建立雙水平捲軸?

DDD
DDD原創
2024-12-15 05:51:13695瀏覽

How Can I Create Dual Horizontal Scrollbars for Large Tables Using Only HTML, CSS, and 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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn