demo：
html：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="author" content="guojufeng"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>兼容到ie7的自定义滚动条</title> <link rel="stylesheet" href="scrollStyle.css"> </head> <body> <div class="box" id="scrollBox"> <!-- 滚动条 --> <div class="scrollBar-area" id="scrollBarBox"> <div class="scrollBar-bar" id="scrollBar"></div> </div> <ul class="scrollCont" id="scrollCont"> <li> <span>滚动效果第一项</span> </li> <li> <span>滚动效果第一项</span> </li> <li> <span>滚动效果第一项</span> </li> <li> <span>滚动效果第一项</span> </li> <li> <span>滚动效果第一项</span> </li> <li> <span>滚动效果第一项</span> </li> <li> <span>滚动效果第一项</span> </li> <li> <span>滚动效果第一项</span> </li> </ul> </div> <script src='http://libs.baidu.com/jquery/1.7.1/jquery.min.js'></script> <script src="scrolldown.js"></script> </body> </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 })();