如何使用 HTML、CSS 和 JavaScript 為表格建立雙水平捲軸(頂部和底部)?
Dec 25, 2024 am 12:33 AM在表格的頂部和底部創建水平滾動條
如果大表格超出可見的瀏覽器窗口,通常需要有滾動條在頂部和底部有效地導航整個表格內容。
在純 HTML 和 CSS 中,這可以透過模擬來實現頂部的第二個水平捲軸。操作方法如下:
-
建立一個虛擬Div:
在表格上方新增一個div 元素,並設定其高度足以建立外觀捲軸(例如, 20px)。
-
停用垂直捲動:
為虛擬 div 和表格的父親 div 設定溢位-y:隱藏以限制滾動到水平方向axis.
-
啟用水平滾動:
設定overflow-x:滾動虛擬di v和表格的父div以啟用水平滾動兩個都
-
同步滾動條:
透過將事件偵聽器附加到捲動事件,利用JavaScript 來同步虛擬 div 和表格的捲動。當一個滾動條移動時,另一個滾動條也會相應地調整。
這是一個將虛擬 div放在表格父級頂端的範例div:
HTML:
<div class="table-wrapper"> <div class="dummy-scrollbar"></div> <div class="data-table">
登入後複製
CSS:
.table-wrapper { height: 130%; overflow: auto; width: 100%; } .dummy-scrollbar { height: 20px; width: 100%; overflow-x: scroll; overflow-y: hidden; } .data-table { overflow-x: scroll; overflow-y: visible; width: 100%; }
登入後複製
CSS:
$(".table-wrapper").scroll(function() { $(".dummy-scrollbar").scrollLeft($(this).scrollLeft()); }); $(".dummy-scrollbar").scroll(function() { $(".table-wrapper").scrollLeft($(this).scrollLeft()); });
登入後複製
以上是如何使用 HTML、CSS 和 JavaScript 為表格建立雙水平捲軸(頂部和底部)?的詳細內容。更多資訊請關注PHP中文網其他相關文章!
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱門文章
倉庫:如何復興隊友
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
擊敗分裂小說需要多長時間?
3 週前
By DDD
Hello Kitty Island冒險:如何獲得巨型種子
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前
By 尊渡假赌尊渡假赌尊渡假赌
公眾號網頁更新緩存難題:如何避免版本更新後舊緩存影響用戶體驗?
3 週前
By 王林

熱門文章
倉庫:如何復興隊友
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
擊敗分裂小說需要多長時間?
3 週前
By DDD
Hello Kitty Island冒險:如何獲得巨型種子
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前
By 尊渡假赌尊渡假赌尊渡假赌
公眾號網頁更新緩存難題:如何避免版本更新後舊緩存影響用戶體驗?
3 週前
By 王林

熱門文章標籤

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)