核心提示：最近有个项目的需求，就是有一个滚动的小滑块，可以控制一个大的p滚动，可能本人的描述有点偏差，要的效果类似下图这是小滑块可以控制大的p 这是大的p滑动 这个滑块我是使用 h5的特性 input做的 va...
最近有个项目的需求，就是有一个滚动的小滑块，可以控制一个大的p滚动，可能本人的描述有点偏差，要的效果类似下图
这是小滑块可以控制大的p
这是大的p滑动
这个滑块我是使用 h5的特性 input做的 value默认为0
<input type="range" id="dragbar" min="0" max="100" value="0"/>
//拿到input
var dragscroll = $("#dragbar");
//大的p的scroll移动的时候，上面的input也会相应改变
$(".overFlowBox").scroll(function(){
//定位拿到大p
var overFlowBox=$(".overFlowBox")[0]
//把p移动的值赋给input的值
dragscroll.val($(".overFlowBox").scrollLeft()/(overFlowBox.scrollWidth-overFlowBox.clientWidth)*100)
})
//input移动的时候，下面的p相应改变
dragscroll.on("mousemove",function(e){
var overFlowBox=$(".overFlowBox")[0];
//滑块移动的值赋给大的p移动的值
$(".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)' );
})
