在表格頂部和底部複製水平捲軸
在表格底部建立水平滾動條是表格的常見要求寬度過大。然而,複製頂部的捲軸需要更具創新性的方法。
為了模擬頂部的第二個水平捲軸,解決方案涉及在原始表格上方建立一個「虛擬」div。這個虛擬 div 有一個水平滾動條,其大小精確地模仿原始滾動條的寬度。
接下來,事件處理程序將附加到虛擬 div 和原始表格以同步它們的滾動行為。每當移動其中一個滾動條時,另一個滾動條就會更新以保持對齊。效果是表格頂部的第二個水平捲軸。
以下程式碼說明了此技術:
HTML:
<code class="html"><div class="wrapper1"> <div class="div1"></div> </div> <div class="wrapper2"> <div class="div2"> <!-- Content Here --> </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>
Java:
<code class="javascript">$(function(){ $(".wrapper1").scroll(function(){ $(".wrapper2").scrollLeft($(".wrapper1").scrollLeft()); }); $(".wrapper2").scroll(function(){ $(".wrapper1").scrollLeft($(".wrapper2").scrollLeft()); }); });</code>Java:透過採用此技術,開發人員可以使用純HTML、CSS 和JavaScript 在表格頂部有效地建立重複的水平捲軸。
以上是如何在表格頂部建立重複的水平捲軸?的詳細內容。更多資訊請關注PHP中文網其他相關文章!