拖动滚动条
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.scroll{
margin: 50px;
width: 500px;
height: 5px;
background: red;
position: relative;
}
.bar{
width: 10px;
height: 20px;
background: yellow;
position: absolute;
top: -7px;
left: 0;
cursor: pointer;
}
.mask{
position: absolute;
left: 0;
top: 0;
background: #369;
width: 0;
height: 5px;
}
</style>
</head>
<body>
<div class="scroll" id="scroll">
<div class="bar" id="bar">
</div>
<div class="mask" id="mask"></div>
</div>
<p></p>
<script>
var scroll = document.getElementById('scroll');
var bar = document.getElementById('bar');
var mask = document.getElementById('mask');
var ptxt = document.getElementsByTagName('p')[0];
var barleft = 0;
bar.onmousedown = function(event){
var event = event || window.event;
var leftVal = event.clientX - this.offsetLeft;
console.log('clientX 点击位置距离浏览器窗口X轴距离+++++',event.clientX)
console.log('this.offsetLeft bar元素距离父元素X轴距离+++++',this.offsetLeft)
console.log('leftVal++++++++++++++++++++++',leftVal)
var that = this; //bar元素
// 拖动一定写到 down 里面才可以
console.log("down------------鼠标点击-------------------------")
document.onmousemove = function(event){
barleft = event.clientX - leftVal;
console.log('clientX222222++++拖动时位置距离浏览器窗口X轴距离++++++++++++',event.clientX)
console.log('leftVal222222++++拖动时滑块初始位置++++++++++++++',leftVal)
console.log('barleft++++++++拖动时距离+++++++++++++++',barleft)
console.log("move------------鼠标拖动--------------------------")
if(barleft < 0)
barleft = 0;
else if(barleft > scroll.offsetWidth - bar.offsetWidth)
barleft = scroll.offsetWidth - bar.offsetWidth;
console.log('scroll的offsetWidth++++++scroll的物理宽度++++++++++',scroll.offsetWidth)
console.log('bar的offsetWidth+++++++bar的物理宽度+++++++++++',bar.offsetWidth)
mask.style.width = barleft +'px' ; //进度条进度(蓝色条的长度)
that.style.left = barleft + "px"; //bar(滑块)位置
ptxt.innerHTML = "已经走了" + parseInt(barleft/(scroll.offsetWidth-bar.offsetWidth) * 100) + "%";
//防止选择内容--当拖动鼠标过快时候，弹起鼠标，bar也会移动，修复bug
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
}
}
document.onmouseup = function(){
document.onmousemove = null; //弹起鼠标不做任何操作
}
</script>
</body>
</html>
