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中文網其他相關文章！
