自定义滚动条

先上效果 （仅支持滑轮） safari   chrome ie   edge  FF  都支持思咪达~

码上来

css

.mode{ width:300px;height:600px;background:#aaa;color:#fff;-webkit-user-select:none;user-select:none;overflow:hidden;position:relative;box-sizing:border-box;}
.m-comm{width:100%;overflow:hidden;position:relative}
.m-comm ul{margin:0;padding:0;}
.m-comm li{list-style:none;text-align:center;width:100%}
.m-comm li img{width:80%;}
.scroll-box{position:absolute;right:0;top:0;width:2px;height:100%;background:#000320}
.scroll-bar{padding:0 1px;background:#f81a63;position:absolute;top:0;left:0}

html

      <div id="wrapper" class="mode">
            <div class="m-comm ">
                <div class="content">
                    <ul>
                           <li>
                               <img src="/img/a.jpg" alt="" />
                           </li>
                      
                          <li><img src="/img/d.jpg" alt="" />
                          </li>
                          <li><img src="/img/e.jpg" alt="" /></li>
                           <li><img src="/img/c.jpg" alt="" /></li>    
                           <li>
                               <img src="/img/a.jpg" alt="" />
                           </li>
                      
                          <li><img src="/img/d.jpg" alt="" />
                          </li>
                          <li><img src="/img/e.jpg" alt="" /></li>
                    </ul>
                </div>
            </div>
        <div class="scroll-box"><div class="scroll-bar"></div></div>
    </div>

 

javascript

  var scroll = function(){
            this.wrapper_height=null;  //内容器高度
            this.vh=null;             //可视区高度
            this.is_show='none';     //是否显示滚动条
            this.bar_height=null;   //滚动条高度
            this.available_scroll=null;   //可滚动的距度
            this.barStyle='#fff';        //滚动条颜色 
        };
        /*
            初始化滚动条        
            @param a  boolean
        */
        scroll.prototype.init=function(a){
            this.isClose=a||false;
            this.wrapper_height=this.wrapper.offsetHeight;
            this.vh=this.wrapper.parentNode.offsetHeight;
            this.bar_height=0;
            var t=null,bh=0;
            if(this.wrapper_height>this.vh){
                 t=(this.vh/this.wrapper_height).toFixed(2);
                 bh=Math.ceil(t*this.vh);
            }
            this.available_scroll=this.vh-bh;
            this.bar.parentNode.style.display=this.is_show;
            this.bar.style.height=bh+'px';
            this.wavai=this.wrapper_height-this.vh;
            this.bar.style.background=this.barStyle;
            return this;
        };
        /*
            显示滚动条
        */
        scroll.prototype.showBarFn=function(){
            this.is_show='block';
            this.bar.parentNode.style.display=this.is_show;
        };
        /*
            隐藏滚动条
        */
        scroll.prototype.hideBarFn=function(){
            this.is_show='none';
            this.bar.parentNode.style.display=this.is_show;
        };
        /*
           Firefox 识别
        */
        scroll.prototype.isFirefox=function(){
            return (navigator.userAgent).toLocaleLowerCase().indexOf('firefox')>-1;
        };
        scroll.prototype.pross=function(){
            var count=this.wavai,sh=this.available_scroll,vh=this.vh,scrollBar=this.bar,isClose=this.isClose;
            return function(e){
                var ev=e||window.event;
                if(isClose==1){ev.preventDefault();return false}
                var thisH=this.offsetHeight;
                if(thisH<vh)return false;   
                var ud=ev.wheelDelta?ev.wheelDelta<0:ev.detail>0,
                    offset=0,
                    offsetTop=this.offsetTop;
                if(ud){
                    if(count>Math.abs(offsetTop)){
                        offset=(offsetTop-10);
                    }else{
                        offset=-count;
                    }
                    this.dataset.scrolly=offset;
                    this.dataset.vh=count;
                }else{
                    if(offsetTop<0){
                        offset=(offsetTop+10);
                    }else{
                        offset=0;
                    }
                }
                this.style.top=offset+'px';
                scrollBar.style.top=sh*(Math.abs(offset)/count)+'px';
            }
        };
        /*
        @绑定每个滚动条列
        */
        scroll.prototype.tobind=function(){
            var mc=this.pross();
            if(this.isFirefox()){
                evst(this.wrapper,'DOMMouseScroll',mc);
            }else{
                evst(this.wrapper,'mousewheel',mc);
            }
        };

     //获取dom   
     var wrapper = document.getElementById('wrapper'),
         content=wrapper.querySelector('div.m-comm'),
         scrollBar = wrapper.querySelector('.scroll-bar');
        
     /*
      @事件绑定方法兼容性处理
      */
     var evst=(function(){
         if(window.addEventListener){
             return function(obj,type,callback){
                 obj.addEventListener(type,callback,!1);
             }
         }
         if(document.attachEvent){
             return function(obj,type,callback){
                 obj.attachEvent('on'+type,callback);
             }
         }
         return function(obj,type,callback){
             obj['on'+type]=callback;
         }
     })();
     

    /*
      @初始化每个滚动条列
    */   
    var ss=null, j=0,isClose=0;

        ss=new scroll();
        ss.wrapper=content;      //内容区DOM
        ss.wrapper.dataset.vh=0;   //初始0
        ss.wrapper.dataset.scrolly=0;  //初始0
        ss.bar=scrollBar;  //滚动条Dom  
        ss.showBarFn();    //显示滚动条
        ss.barStyle='red'  //滚动条颜色
        ss.init();   //初始化参数
        ss.tobind();//绑定滚轮事件


    /*
      @窗口改变大小时，页面布局重绘
    */
    var onres=true;
    window.onresize=function(){
        if(onres){
            onres=false;
            setTimeout(function(){
                ss.init();
                onres=true;
            },700)
        }
    };
    
    

 

就酱子了