js模拟滚动条

        在项目开发的过程中，拿到的设计图总是很精美，但是代码实现的结果却总是差强人意。滚动条就是一个例子，今天小菜就用js去模拟滚动条，以替代原本各个浏览器风格不一的滚动条。

       主要用到的事件：鼠标的拖拽(鼠标按下mousedown，鼠标移动mousemove，鼠标松开mouseup)，以及给内容添加滑轮滚动的监听事件。由于jquery中没有对这一事件的支持，所以将用原生的js去实现这一部分的代码。

       效果演示：http://sandbox.runjs.cn/show/k7x81fzd

       在线代码：http://runjs.cn/code/k7x81fzd

       可能代码并没有您手下的好，但还是希望能够指正本菜鸟一些不足的地方。欢迎一起学习交流！

       下面是代码部分：

      html:

<div class="con" id="con">
      <div class="contant" id="contant">
        <p>1111111111</p>
        <p>2222222222</p>
        <p>3333333333</p>
        <p>4444444444</p>
        <p>5555555555</p>
        <p>6666666666</p>
        <p>7777777777</p>
        <p>8888888888</p>
        <p>9999999999</p>
        <p>0000000000</p>
      </div>
      <div class="Con_Scorll" id="Con_Scorll">
        <div class="Do_Scorll" id="Do_Scorll"></div>
      </div>

    </div>

css:

*{margin:0;padding:0}
.con{position:relative;overflow:hidden;width:200px;height:100px;background-color:cyan}
.contant{position:absolute;left:50px;width:100px;background-color:#454545;color:#fff}
.Con_Scorll{position:absolute;top:0;right:0;width:20px;height:100%;background:yellow}
.Do_Scorll{position:absolute;top:0;left:0;width:100%;background:red}

js:

$(function(){
	//竖向的滚动条，四个参数，可视区域ID，内容区域Id，滚动条区域，滚动条，
    function ScorllTop(id1,id2,id3,id4){
        var $container = $(id1),//可视区域
            $contanr   = $(id2),//内容区域
            $conScroll = $(id3),//滚动条活动区域
            $sroll     = $(id4),//滚动条
              startY   = 0,//开始位置  
              lastY    = 0,//结束位置
                YN     = false,
                  bBtn = true;//判断滚动条上滚还是下滚

            $sroll.css({'height':$container.height()*$conScroll.height()/$contanr.outerHeight()+'px'});

            $sroll.mousedown(function(e){
                startY = e.clientY - this.offsetTop;  
                this.setCapture && this.setCapture();//避免IE下拖拽过快鼠标失去对象
                YN = true;
                return false;
            });

            $sroll.mousemove(function(e){
                var maxVal = $conScroll.height() - $(this).height();
                if(YN){
                    lastY = e.clientY - startY;
                    lastY = lastY < 0 ? 0 :lastY;
                    lastY = lastY > maxVal ? maxVal : lastY;

                    $(this).css({'top':lastY+'px'});
                    $contanr.css({'top':-$conScroll.height()*lastY/$(this).height()+'px'});
                    window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); // 防止拖动文本  
                    e.stopPropagation(); 
                }
                
                return false;
            });

            $sroll.mouseup(function(e){
                YN = false;
                NumY = lastY;
                return false;
            });
            //为内容区域添加滑轮滚动事件
            if($contanr[0].addEventListener){
                $contanr[0].addEventListener('DOMMouseScroll',MouseScr,false);
                $conScroll[0].addEventListener('DOMMouseScroll',MouseScr,false);
            }
            //滑轮这部分代码是我参考的别人的，还不知道这句话是怎么个意思，求大神指点
            $contanr[0].onmousewheel = MouseScr;
            $conScroll[0].onmousewheel = MouseScr;
            function MouseScr(ev){
                var ev = ev || window.event,
                  TopY = 0;
                if(ev.detail){
                    bBtn = ev.detail>0  ?  true : false;
                }
                else{
                    bBtn = ev.wheelDelta<0  ?  true : false;
                }
                if(bBtn){   //下
                    TopY = $contanr.position().top-10;
                }
                else{  //上
                    TopY = $contanr.position().top+10;
                }
                var maxTop = $contanr.outerHeight()-$container.outerHeight();
                TopY = TopY > 0 ? 0 : TopY;
                TopY = TopY < -maxTop ? -maxTop : TopY;

                console.log($conScroll.outerHeight());
                $contanr.css({'top':TopY+'px'});
                $sroll.css({'top':$sroll.height()*Math.abs(TopY)/$conScroll.height()+'px'});

                if(ev.preventDefault){
                    ev.preventDefault();
                }
                else{
                    return false;
                }
            }
    }
    ScorllTop('#con','#contant','#Con_Scorll','#Do_Scorll');
});