自定义滚动条控制大的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)' );

})