js 写一个滚动条

<!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 写一个滚动条

推荐阅读
