demo：

html：

  
       
       
       
         
       
     
    
          
      
      
       
    
      
    
      
      
       
        滚动效果第一项      
      
       
        滚动效果第一项      
      
       
        滚动效果第一项      
      
       
        滚动效果第一项      
      
       
        滚动效果第一项      
      
       
        滚动效果第一项      
      
       
        滚动效果第一项      
      
       
        滚动效果第一项      
    
      
  
     
    

 

css：

html.body,li,ul{
     margin: 0;  padding: 0;  list-style: none;}body{
     padding-top: 45px;  padding-left: 50px;}.box{
     position: relative;  padding: 0px 11px;  background: #dbe0ff;    width: 300px;  height: 180px;  overflow: hidden;}.scrollBar-area{
     position: absolute;  /* 注意下边这种写法 */  top: 0;  bottom: 0;  /* top+bottom均为0，如果父元素height不为auto，就相当于height：100%的设置 */  /* 但是这种写法再ie5中用js得不到高度，jq的height()方法和js的clientHeight都得不到 */  right: 0;  width: 11px;  border-radius: 10px;  height: 100%;}.scrollBar-bar{
     margin: 0 3px;  border-radius: 10px;  background: #b8c2ff;  cursor: pointer;  /* 关键代码,提前定位好改变top值进行滚动 */  position: absolute;  top: 0;  right: 0;  z-index: 1;  left: 0;  }.scrollCont{
     padding: 10px 0;  /* 关键代码,提前定位好改变top值进行滚动 */  position: absolute;  top: 0;  /* 注意下面这种写法 */  right: 0;  left: 0;  /* left+right均为0，如果父元素width不为0，就相当于块元素的width：100%的设置 */}li{
     margin: 5px 0;  padding: 5px 10px;  cursor: pointer;}li:hover{
     background: #a3b0ff;}

 

js：

1 var firefox = navigator.userAgent.indexOf('Firefox') != -1;//监测火狐浏览器下使用兼容写法  2 // 下拉滚动条  3 //竖向的滚动条，四个参数，可视区域ID，内容区域Id，滚动条区域，滚动条，  4 function ScrollTop(params){  5   var $container = $(params.scrollBox),//可视区域  6       $contanr   = $(params.scrollCont),//内容区域  7       $conScroll = $(params.scrollBarBox),//滚动条活动区域  8       $sroll     = $(params.scrollBar),//滚动条  9         startY   = 0,//开始位置   10         lastY    = 0,//结束位置 11           YN     = false,//判断鼠标按下 12             bBtn = true;//判断滚动条上滚还是下滚 13   var $containerH = $container.height(); 14   var $contanrH = $contanr.outerHeight(); 15   // console.log($container.height()) 16   // console.log($conScroll.height()) 17   // console.log($contanr.outerHeight()) 18   // console.log($container.height()*$conScroll.height()/$contanr.outerHeight()) 19   function MouseScr(ev){ 20     var $containerH1 = $container.height(); 21     var $contanrH1 = $contanr.outerHeight(); 22     if($containerH1 >= $contanrH1){ 23       return false 24     }else{ 25       var ev = ev || window.event, 26         TopY = 0; 27       if(ev.detail){ 28           bBtn = ev.detail>0  ?  true : false; 29       } 30       else{ 31           bBtn = ev.wheelDelta<0  ?  true : false; 32       } 33       if(bBtn){   //下 34           TopY = $contanr.position().top-10; 35       } 36       else{  //上 37           TopY = $contanr.position().top+10; 38       } 39       var maxTop = $contanr.outerHeight()-$container.outerHeight(); 40       TopY = TopY > 0 ? 0 : TopY; 41       TopY = TopY < -maxTop ? -maxTop : TopY; 42       // console.log($conScroll.outerHeight()); 43       $contanr.css({'top':TopY+'px'}); 44       $sroll.css({'top':$sroll.height()*Math.abs(TopY)/$conScroll.height()+'px'}); 45  46       if(ev.preventDefault){ 47           ev.preventDefault(); 48       } 49       else{ 50           return false; 51       } 52     } 53   } 54   if( $containerH >= $contanrH){ 55     // console.log('remove scroll') 56     $sroll.css('height',$containerH); 57     // 禁止鼠标事件 58     function MouseWheel(e) { 59       // console.log('we') 60       $contanr.css('top',0); 61       $sroll.css('top',0); 62       e = e || window.event; 63       if (e.stopPropagation) e.stopPropagation(); 64       else e.cancelBubble = true; 65       if (e.preventDefault) e.preventDefault(); 66       else e.returnValue = false; 67       return false; 68     }; 69     if(firefox){ 70       $contanr[0].removeEventListener('DOMMouseScroll',MouseScr,false);//兼容火狐。。。。。。。 71       $conScroll[0].removeEventListener('DOMMouseScroll',MouseScr,false); 72     } 73     // console.log($contanr) 74     // console.log($contanr[0]) 75     $contanr[0].onmousewheel = MouseWheel; 76     $conScroll[0].onmousewheel = MouseWheel; 77   }else{ 78     // 滚动条的高度等于可视区域高度*滚动区域高度/内容高度。 79     $sroll.css({'height':$container.height()*$conScroll.height()/$contanr.outerHeight()+'px'}); 80     $sroll.mousedown(function(e){ 81       startY = e.clientY - this.offsetTop;   82       this.setCapture && this.setCapture();//避免IE下拖拽过快鼠标失去对象 83       YN = true; 84       return false; 85     }); 86     $sroll.mousemove(function(e){ 87       var maxVal = $conScroll.height() - $(this).height(); 88       if(YN){ 89           lastY = e.clientY - startY; 90           lastY = lastY < 0 ? 0 :lastY; 91           lastY = lastY > maxVal ? maxVal : lastY; 92  93           $(this).css({'top':lastY+'px'}); 94           $contanr.css({'top':-$conScroll.height()*lastY/$(this).height()+'px'}); 95           window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); // 防止拖动文本   96           e.stopPropagation();  97       } 98        99       return false;100     });101 102     $sroll.mouseup(function(e){103       YN = false;104       NumY = lastY;105       return false;106     });107     //为内容区域添加滑轮滚动事件108     if($contanr[0].addEventListener){109       $contanr[0].addEventListener('DOMMouseScroll',MouseScr,false);//兼容火狐。。。。。。。对，不是ie是火狐。110       $conScroll[0].addEventListener('DOMMouseScroll',MouseScr,false);111     }112     $contanr[0].onmousewheel = MouseScr;113     $conScroll[0].onmousewheel = MouseScr;114   }115 }116 (function(){117   var params = {118     scrollBox : '#scrollBox',119     scrollCont : '#scrollCont',120     scrollBarBox : '#scrollBarBox',121     scrollBar : '#scrollBar'122   }123     /*注意： .height()方法不计算padding在内 */124     if($(scrollCont).height()>$(scrollBox).height()){125       $(scrollBar).css('visibility','visible');126       ScrollTop(params);127     }else{128       $(scrollBar).css('visibility','hidden');129     }130 })();