2023年6月20日发(作者：)

html⾃定义拖动进度条，包含样式和事件⾃定义可拖动的进度条，如下图效果：代码分三部分html

　　

css#demo {

width: 600px; height: 100px; margin: 100px auto;

display: flex; align-items: center;

}#demo .progress {

width: 100%; height: 6px; border-radius: 3px;

background: #F1F5FD;

}#demo .progress .progress-bar {

width: 40%; height: 100%; border-radius: 3px;

background: #0072FF;

}#demo .progress .progress-bar .progress-thumb {

width: 14px; height: 14px; border-radius: 50%;

background: #FFFFFF; box-shadow: 0 0 15px 5px #0072FF;

float: right;

position: relative; left: 7px; top: -5px;

}　　

到这步就基本实现了⾃定义的样式，只需改变 .progress-bar 的 width 就能显⽰不同的进度；接下来给进度条加上拖动事件

JavaScript

　　

关于本篇随笔，作者的考虑：1. 将 mousedown 事件绑定在进度条的包裹层⽽⾮进度条本⾝，这是参考了主流视频播放器的效果后的设计，为了优化⽤户体验2. js ⽤纯原⽣语法书写，如果⽤ JQuery 可以简化选择器和 css 样式的获取3. ⿏标在滚动条外的移动，本⽂使⽤ clientX 来计算

2023年6月20日发(作者：)

html⾃定义拖动进度条，包含样式和事件⾃定义可拖动的进度条，如下图效果：代码分三部分html

　　

css#demo {

width: 600px; height: 100px; margin: 100px auto;

display: flex; align-items: center;

}#demo .progress {

width: 100%; height: 6px; border-radius: 3px;

background: #F1F5FD;

}#demo .progress .progress-bar {

width: 40%; height: 100%; border-radius: 3px;

background: #0072FF;

}#demo .progress .progress-bar .progress-thumb {

width: 14px; height: 14px; border-radius: 50%;

background: #FFFFFF; box-shadow: 0 0 15px 5px #0072FF;

float: right;

position: relative; left: 7px; top: -5px;

}　　

到这步就基本实现了⾃定义的样式，只需改变 .progress-bar 的 width 就能显⽰不同的进度；接下来给进度条加上拖动事件

JavaScript

　　

关于本篇随笔，作者的考虑：1. 将 mousedown 事件绑定在进度条的包裹层⽽⾮进度条本⾝，这是参考了主流视频播放器的效果后的设计，为了优化⽤户体验2. js ⽤纯原⽣语法书写，如果⽤ JQuery 可以简化选择器和 css 样式的获取3. ⿏标在滚动条外的移动，本⽂使⽤ clientX 来计算