原生js实现滚动条

上效果图

页面布局一个wrapper，左侧是内容部分，右侧是滚动条部分，包括滚动区域和滚动小块，原理是利用滚动滑块在滚动区域的滚动距离与内容区域在盒子中移动距离比例关系实现联动

html部分代码

js部分代码

var wrapper = document.getElementsByClassName("scroll-wrapper")[0];
    var content= wrapper.children[0];
    var scroll = wrapper.children[1];
    var bar = scroll.children[0];
    //获取动态滚动条   内容的高/盒子高 = scroll高/bar高
     var ballHeight = wrapper.offsetHeight*scroll.offsetHeight/content.offsetHeight;
     bar.style.height= ballHeight+"px";
    bar.onmousedown=function (event) {
        event = event || window.event;
        //获取鼠标在页面的位置
        var pagey = event.pageY || document.documentElement.scrollTop+event.clientY;
        //获取鼠标在bar中的位置
        var barY = pagey - bar.offsetTop;
        document.onmousemove = function (event) {
            //获取鼠标在页面中的位置
          var yy = event.pageY || document.documentElement.scrollTop+event.clientY;
          //获取滚动bar在页面中的位置 = 鼠标在页面中的位置-鼠标在盒子中的位置
          yy = yy - barY;
          //限制y的范围（大于0，小于scroll的高度-bar的高度）
            if(yy<0){
                yy=0;
            }
            if(yy>scroll.offsetHeight-bar.offsetHeight){
                yy=scroll.offsetHeight-bar.offsetHeight;
            }
            //bar移动
            bar.style.top= yy+"px"
            //bar滚动与内容联动  内容走的距离/bar走的距离 = （内容的高-盒子的高）/（scroll的高-bar的高）
            var contentY = yy *(content.offsetHeight-wrapper.offsetHeight)/(scroll.offsetHeight-bar.offsetHeight);
            content.style.marginTop = -contentY + "px";
            //取消选定
            window.getSelection? window.getSelection().removeAllRanges():document.selection.empty();
        }
    }
    bar.onmouseup = function () {
        //事件解绑
        document.onmousemove = null;
    }

css部分代码

*{
            margin:0;
            padding:0;
        }
        .scroll-wrapper{
            width: 300px;
            height: 500px;
            margin:50px auto;
            border: 1px solid #000;
            overflow: hidden;
            position:relative;
        }
        .content{
            padding:20px 30px;
            overflow: hidden;
        }
        .scroll{
            position:absolute;
            top: 0;
            right: 0;
            width:30px;
            height:500px;
            box-sizing:border-box;
            border-left: 1px solid #000;
        }
        .bar{
            width:100%;
            cursor: pointer;
            position:absolute;
            top:0;
            right:0;
            background-color:#ccc;
        }