我的页面很大table。所以我决定在表格底部放一个水平滚动条。但我希望这个滚动条也位于桌面的顶部。
table
我在模板中的内容是这样的:
<div style="overflow:auto; width:100%; height:130%"> <table id="data" style="width:100%">...</table> </div>
仅在 HTML 和 CSS 中可以做到这一点吗?
要在元素顶部模拟第二个水平滚动条,请在具有水平滚动的元素上方放置一个“虚拟” div,刚好足够高以容纳滚动条。然后为虚拟元素和真实元素附加“滚动”事件的处理程序,以便在移动任一滚动条时使另一个元素同步。虚拟元素看起来像真实元素上方的第二个水平滚动条。
div
一个活生生的例子 ,看这个小提琴
这是代码 :
HTML:
<div class="wrapper1"> <div class="div1"></div> </div> <div class="wrapper2"> <div class="div2"> <!-- Content Here --> </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()); }); });