<!DOCTYPE html>
<html lang="en">
<head>
???<meta charset="UTF-8">
???<title>自己练习写一个滚动条</title>
???<style>
???????*{
???????????margin:0;
???????????padding: 0;
???????}
???????.scroll{
???????????margin:200px;
???????????width:500px;
???????????height:5px;
???????????background: #ccc;
???????????position: relative;
???????}
???????.bar{
???????????width:10px;
???????????height:20px;
???????????background: #369369;
???????????position: absolute;
???????????top:-7px;
???????????left:0;
???????????cursor: pointer;
???????}
???????.mask{
???????????position: absolute;
???????????left:0;
???????????top:0;
???????????background: #369369;
???????????width:0px;
???????????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>
???????window.onload = function(){
???????????var scroll = document.getElementById(‘scroll‘);
???????????var bar = document.getElementById(‘bar‘);
???????????var mask = document.getElementById(‘mask‘);
???????????var ptxt = document.getElementsByTagName(‘p‘)[0];
???????????bar.onmousedown = function (event){
???????????????// Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
???????????????// 事件通常与函数结合使用，函数不会在事件发生前被执行！
???????????????var event = event || window.event;
???????????????//相对于浏览器的x轴距离，，， ?????相对于父元素的左内边距的距离
???????????????// 获取到点击轴的距离屏幕的距离
???????????????var leftVal = event.clientX - this.offsetLeft;
???????????????console.log(leftVal);
???????????????var that = this;
???????????????//拖动
???????????????document.onmousemove = function(event){
???????????????????var event = event || window.event;
???????????????????// 获取移动的x轴距离，可能是正值，负值，
???????????????????var barleft = event.clientX-leftVal;
???????????????????//console.log(barleft);
???????????????????console.log(scroll.offsetWidth);
???????????????????console.log(bar.offsetWidth)
???????????????????if(barleft<0){
???????????????????????barleft = 0;
???????????????????????//offsetWidth：元素在水平方向上占据的大小，无单位
???????????????????}else if(barleft > scroll.offsetWidth - bar.offsetWidth){
???????????????????????barleft = scroll.offsetWidth - bar.offsetWidth;
???????????????????}
???????????????????mask.style.width = barleft+‘px‘;
???????????????????that.style.left = barleft+‘px‘;
???????????????????ptxt.innerHTML = ‘已经走啦‘ + parseInt(barleft/(scroll.offsetWidth-bar.offsetWidth)*100)+‘%‘;
???????????????????//获取光标的当前位置，这个是兼容写法，后面的是ie8及以下的，
???????????????????
???????????????????window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
???????????????}
???????????};
???????????document.onmouseup = function(){
???????????????document.onmousemove = null; //弹起鼠标不做任何操作
???????????}
???????}
???</script>
</body>
</html>
js 写一个滚动条
原文地址：https://www.cnblogs.com/lieaiwen/p/9547774.html