写了个滚动条效果,但让滚动条有渐变效果却不知道如何写 _JavaScript

写了个滚动条效果,但让滚动条有渐变效果却不知道怎么写.
我是想让鼠标轮滚的时候滚动条可以有一种渐渐的移动效果 ..
但现在我写的这个轮滚的时候不停的一直滚动了 ..
该怎么来写啊?
关键这个代码:
function ss(){
var yyy = getClass(doc,"slider_btn")[0].offsetHeight;
var ttt = getClass(doc,"slider_btn")[0].offsetTop;
var re = yyy+ttt;
if(ttt < re){
num++;
getClass(doc,"slider_btn")[0].style.top = num+"px";
timer = setTimeout(ss,30)
}else{
clearTimeout(timer);
}
}
ss();
HTML code

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8" />

  <title> New Document </title>


  <style type="text/css">
     *{margin:0;padding:0;}
            .wrap{width:320px;height:200px;overflow:hidden;position:relative;border:1px solid orange;margin:0 auto}
            .ul{position:absolute;top:0;left:0;list-style:none}
      .ul_wrap{ position:relative;width:300px;float:left; }
      .slider{ float:right;width:10px;height:200px;overflow:hidden;position:relative; }
      .slider_btn{ position:absolute;top:0;left:0;width:10px;background:orange;height:50px; }?
  </style>


 </head>

 <body>
    <div class="wrap">
        <div class="slider">
            <div class="slider_btn">
            </div>
        </div>
        <div class="ul_wrap" id="ul_wrap">
            <ul class="ul">
                <li><a href="">新版个人空间介绍之个人主页</a></li>
                <li><a href="">新版个人空间介绍之个人主页</a></li>
                <li><a href="">新版个人空间介绍之个人主页</a></li>
                <li><a href="">新版个人空间介绍之个人主页</a></li>
                <li><a href="">新版个人空间介绍之个人主页</a></li>
                <li><a href="">新版个人空间介绍之个人主页</a></li>
                <li><a href="">新版个人空间介绍之个人主页</a></li>
                <li><a href="">新版个人空间介绍之个人主页1</a></li>
                <li><a href="">新版个人空间介绍之个人主页</a></li>
                <li><a href="">新版个人空间介绍之个人主页</a></li>
                <li><a href="">新版个人空间介绍之个人主页</a></li>
                <li><a href="">新版个人空间介绍之个人主页1</a></li>
                <li><a href="">新版个人空间介绍之个人主页</a></li>
                <li><a href="">新版个人空间介绍之个人主页</a></li>
                <li><a href="">新版个人空间介绍之个人主页</a></li>
                <li><a href="">新版个人空间介绍之个人主页1</a></li>
                <li><a href="">新版个人空间介绍之个人主页</a></li>
                <li><a href="">新版个人空间介绍之个人主页</a></li>
                <li><a href="">新版个人空间介绍之个人主页2</a></li>
            </ul>
        </div>
    </div>

    <script type="text/javascript">
        var $ = function(id){ return typeof id === "string"?document.getElementById(id):id };
        var n =0;
        var doc = document;
        function getClass(){
            var elem =  arguments[0].getElementsByTagName("*");
            var arr = [];
            for(var i=0; i<elem.length; i++){
                if(elem[i].className == arguments[1]){
                    arr.push(elem[i]);
                }
            }
            return arr;
        }
        function ev(e){
            return e || window.event;
        }
        var h = getClass(doc,"ul")[0].offsetHeight - getClass(doc,"wrap")[0].offsetHeight ;
        var s = getClass(doc,"slider")[0].offsetHeight-getClass(doc,"slider_btn")[0].offsetHeight;
        var result = h / s;
        getClass(doc,"slider_btn")[0].onmousedown = function(e){
            var posY = ev(e).clientY - this.offsetTop;
            document.onmousemove = function(e){
                var y = ev(e).clientY - posY;
                
                if(y < 0 ){
                    getClass(doc,"slider_btn")[0].style.top = "0px";
                }else if(y > getClass(doc,"slider")[0].offsetHeight-getClass(doc,"slider_btn")[0].offsetHeight){
                    getClass(doc,"slider_btn")[0].style.top = getClass(doc,"slider")[0].offsetHeight-getClass(doc,"slider_btn")[0].offsetHeight+"px";
                }else{
                    n =y;
                    getClass(doc,"slider_btn")[0].style.top = y +"px";
                    getClass(doc,"ul")[0].style.top = -y * result + "px";
                }
            }
        }
        document.onmouseup = function(){
            document.onmousemove = null;
        }
        
        function getWheel(e){
            if(e.wheelDelta){
                return e.wheelDelta;
            }else{
                return -e.detail * 40;
            }
        }
        var timer = null;
        var num = 0;
        function aa(e){
            if(getWheel(e) == -120){
                if(getClass(doc,"slider_btn")[0].offsetTop >= getClass(doc,"slider")[0].offsetHeight-getClass(doc,"slider_btn")[0].offsetHeight ){
                    return false;
                }
                //n+=10;
                function ss(){
                    var yyy = getClass(doc,"slider_btn")[0].offsetHeight;
                    var ttt = getClass(doc,"slider_btn")[0].offsetTop;
                    var re = yyy+ttt;
                    if(ttt < re){
                        num++;
                        getClass(doc,"slider_btn")[0].style.top = num+"px";
                        timer = setTimeout(ss,30)
                    }else{
                        clearTimeout(timer);
                    }
                }
                ss();
            }else{
                if(getClass(doc,"slider_btn")[0].offsetTop <= 0 ){
                    return false;
                }
                n-=10/2;                
            }
            console.log(n)
            //getClass(doc,"slider_btn")[0].style.top = n +"px";
            getClass(doc,"ul")[0].style.top = -n * result + "px";
        }
        if(getClass(doc,"wrap")[0].addEventListener){
            getClass(doc,"wrap")[0].addEventListener("mousewheel",aa,false);
        }else{
            getClass(doc,"wrap")[0].attachEvent("onmousewheel",aa);
        }
    </script>

 </body>
</html>