要在元素顶部模拟第二个水平滚动条,请在
div具有水平滚动的元素上方放置一个“虚拟” ,刚好足以容纳滚动条。然后为虚拟元素和真实元素附加“scroll”事件的处理程序,以在移动任一滚动条时使另一个元素同步。虚拟元素将看起来像真实元素上方的第二个水平滚动条。
这是代码 :
HTML:
<div > <div ></div></div><div > <div > <!-- 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()); });});


