最近有个项目的需求,就是有一个滚动的小滑块,可以控制一个大的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)' );
- })
来源: https://www.2cto.com/kf/201712/703271.html