js自定义滚动条

 <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>

<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>

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‘; ???????} ???????})