js自定义滚动条

Posted 2020-11-05 aSnow

今天听到别人说自定义滚动条，所以就在吃饭的时间写了个

html部分

 <div class="out" id="out">
        <div class="inner" id="inner">
            <div class="box">1</div>
            <div class="box">2</div>
            <div class="box">3</div>
            <div class="box">4</div>
            <div class="box">5</div>
            <div class="box">6</div>
            <div class="box">7</div>
            <div class="box">8</div>
            <div class="box">9</div>
            <div class="box">10</div>
            <div class="box">11</div>
            <div class="box">12</div>
        </div>
        <div class="scrollbar" id="scrollbar">
            <div class="scrollbtn" id="scrollbtn"></div>
        </div>
    </div>

css部分

<style>
    *{
        padding:0;margin:0;border:0;
    }
    .out{
        width:300px;height:600px;
        margin:20px auto;
        background:#866C51;
        overflow: hidden;
        position: relative;
    }
    .inner{
        width:300px;height:auto;
        margin:0px auto;
        background:#866C51;
    }
    .box{
        width:100%;height:200px;
        text-align:center;
        line-height:200px;
    }
    .box:nth-child(1){
        background: #11ff4c;
    }
    .box:nth-child(2){
        background: #19faff;
    }
    .box:nth-child(3){
        background: #ff831e;
    }
    .box:nth-child(4){
        background: #111111;
    }
    .box:nth-child(5){
        background: #ff6dd2;
    }
    .box:nth-child(6){
        background: #223aff;
    }
    .box:nth-child(7){
        background: #111111;
    }
    .box:nth-child(8){
        background: #d9e8ff;
    }
    .box:nth-child(9){
        background: #ff80d8;
    }
    .box:nth-child(10){
        background: #a033ff;
    }
    .box:nth-child(11){
        background: #2b33ff;
    }
    .box:nth-child(12){
        background: #17ffda;
    }
    .scrollbar{
        width:10px;height:600px;
        background:#66513B;
        position: absolute;
        right:0;top:0;
    }
    .scrollbtn{
        width:100%;height:50px;
        background:#BCA68E;
        border-radius:20px;
        position: absolute;
        top: 0px;
    }
</style>

js部分

var inner=document.getElementById(\'inner\');
        var scrollbtn=document.getElementById(\'scrollbtn\');
        var out=document.getElementById(\'out\');
        var scrollbar=document.getElementById(\'scrollbar\');
        var bili=inner.offsetHeight/out.offsetHeight;//盒子和内容的比例
        scrollbtn.style.height=scrollbar.offsetHeight/bili+\'px\';//内容的高
        var zdh=scrollbar.offsetHeight-scrollbtn.offsetHeight;//最大的top值
        var spend=20
        scrollbtn.onmousedown = function(e){
             var ev=e||window.event;
             var y=ev.clientY-scrollbtn.offsetTop;//鼠标点击时滚动条的位置
              document.onmousemove = function (e) {
                  var ev=e||window.event;
                  var tops=ev.clientY-y;//滚动时top值
                  if(tops<0){
                      tops=0
                  }else if(tops>zdh){
                      tops=zdh
                  }
                  scrollbtn.style.top=tops+\'px\';
                  inner.style.marginTop=-tops*bili+"px";
              }
               document.onmouseup = function () {
                document.onmousemove = null;
                document.onmouseup = null;
            }
        
        }
        //检测鼠标滚动
   function mouseWheel(obj,upfun,downfun){
        if(obj.addEventListener){
            obj.addEventListener("mousewheel",fn);
            obj.addEventListener("DOMMouseScroll",fn)
        }else{
            obj.attachEvent("onmousewheel",fn);
        }
        function fn(e){
            var ev=e||window.event;
            //鼠标滚轮滚动的方向
            var val=ev.detail||ev.wheelDelta;
            if(val==-3||val==120){
                upfun();//向上滚
            }else if(val==3||val==-120){
                downfun();//向下滚
            }
            if(ev.preventDefault){
                ev.preventDefault();
            }else{
                ev.returnValue=false;
            }
        }
    }

    mouseWheel(out,function(){
        if(scrollbtn.offsetTop<=0){
            scrollbtn.style.top=0+\'px\';
            inner.style.marginTop=0+\'px\';
        }else{
            inner.style.marginTop=inner.offsetTop+spend+"px";
            scrollbtn.style.top=scrollbtn.offsetTop-spend/bili+\'px\';
        }
        
    },function(){
        if(scrollbtn.offsetTop>=zdh){
            scrollbtn.style.top=zdh+\'px\';
            inner.style.marginTop=-zdh*bili+\'px\';
        }else{
                inner.style.marginTop=inner.offsetTop-spend+"px";
        scrollbtn.style.top=scrollbtn.offsetTop+spend/bili+\'px\';
        }
    
    })

效果如下