自定義滾動條控制大的div滾動

最近有個項目的需求，就是有一個滾動的小滑塊，可以控制一個大的div滾動，可能本人的描述有點偏差，要的效果類似下圖

這是小滑塊可以控制大的div

這是大的div滑動

這個滑塊我是使用 h5的特性 input做的 value默認爲0

<input type="range" id="dragbar" min="0" max="100" value="0"/>

//拿到input

var dragscroll = $("#dragbar");

//大的div的scroll移動的時候，上面的input也會相應改變

$(".overFlowBox").scroll(function(){

//定位拿到大div

var overFlowBox=$(".overFlowBox")[0]

//把div移動的值賦給input的值

dragscroll.val($(".overFlowBox").scrollLeft()/(overFlowBox.scrollWidth-overFlowBox.clientWidth)*100)

})

//input移動的時候，下面的div相應改變

dragscroll.on("mousemove",function(e){

var overFlowBox=$(".overFlowBox")[0];

//滑塊移動的值賦給大的div移動的值

$(".overFlowBox").scrollLeft(dragscroll.val()*(overFlowBox.scrollWidth-overFlowBox.clientWidth)/100)

$(this).attr('value', this.value);

//這是在滑動的時候給的css

$(this).css( 'background', 'linear-gradient(to right, #f6af5c, white ' + this.value + '%, white)' );

})

在這裏順便給個鏈接，怎麼修改input的默認樣式 http://blog.csdn.net/u013347241/article/details/51560290