方案一
鼠标按下的时候 起点 = 球的x轴位置-偏移位置.
按下开始移动的时候 , 需要继承上次的偏移位置开始移动 即style.left = 球的x轴实时位置-起点
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
padding: 100px;
margin: 0;
}
.scroll{
width: 500px;
height: 5px;
background: #ccc;
position: relative;
}
.bar{
width: 20px;
height: 20px;
border-radius: 50%;
background: #369;
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">
<div class="bar"></div>
<div class="mask"></div>
</div>
<p>已经走了0%</p>
<script>
const [scroll, bar, mask, ptxt // 条, 点, 进度条, 进度字
] =['.scroll','.bar','.mask', 'p' ].map(item=>document.querySelector(item));
let barleft = 0;
bar.onmousedown = function(e){
const leftVal = e.clientX - this.offsetLeft; // 类似于 res = x-l;
document.onmousemove = ({clientX})=>{
barleft = clientX - leftVal; // 类似于 l = res-x l就是left的值
if(barleft < 0){barleft = 0;}
else if(barleft > scroll.offsetWidth - bar.offsetWidth){barleft = scroll.offsetWidth - bar.offsetWidth;}
mask.style.width = barleft;
this.style.left = barleft;
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>
方案二
不推荐
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
padding: 100px;
margin: 0;
}
.scroll {
width: 500px;
height: 5px;
background: #ccc;
position: relative;
}
.bar {
width: 20px;
height: 20px;
border-radius: 50%;
background: #369;
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">
<div class="bar"></div>
<div class="mask"></div>
</div>
<p>已经走了0%</p>
<script>
const [scroll, bar, mask, ptxt // 条, 点, 进度条, 进度字
] = ['.scroll', '.bar', '.mask', 'p'].map(item => document.querySelector(item));
const initScrollX = scroll.getBoundingClientRect().left; // scroll距离body距离
bar.onmousedown = function (e) {
const barX = bar.getBoundingClientRect().left; // 球距离body距离
const mouseDistanceBar = e.clientX - initBarX; // 鼠标x坐标->距离->球左侧长度：鼠标距离球左侧的位置
document.onmousemove = ({ clientX }) => {
if (clientX - initScrollX - mouseDistanceBar < 0) { this.style.left = 0 }
else if (clientX - initScrollX - mouseDistanceBar + bar.offsetWidth > scroll.offsetWidth) {
this.style.left = scroll.offsetWidth - bar.offsetWidth;
} else {
// 当前在球中鼠标x位置-条x位置-鼠标距离球左侧的位置：即假设永远使得在球左侧起拖动
this.style.left = clientX - initScrollX - mouseDistanceBar;
}
// 显示百分比
const shwoPercent = parseInt(Number(this.style.left.replace('px',''))/(scroll.offsetWidth - bar.offsetWidth)*100);
ptxt.innerHTML = `已经走了${shwoPercent}%`;
//防止选择内容--当拖动鼠标过快时候，弹起鼠标，bar也会移动，修复bug
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
}
}
document.onmouseup = function () {
document.onmousemove = null; //弹起鼠标不做任何操作
}
</script>
</body>
</html>