js自定义滚动条完美兼容ff，IE

  1 <!doctype html>
  2 <html>
  3     <head>
  4     
  5     <style type="text/css">
  6        .f{ height:500px; 20px; background:#CCC; position:absolute; top:100px; left:458px;*top:15px}
  7        .z{ height:50px; position:absolute; 20px; background:#F00;}
  8        .div{ 0; height:0; background:#969; margin:100px; height:500px; 350px; overflow:hidden; position:relative}
  9        .txt{ line-height:20px; color:#FFFFFF; font-size:12px; padding:10px; 330px; position:absolute; word-break:break-all}
 10        
 11     </style>
 12     </head>
 13     <body>
 14         
 15         
 16       <div class="f" id="f"><div class="z" id="z"></div></div>  
 17       <div class="div" id="box">
 18            <div id="txt" class="txt">
 19            
 20            就应该换CEO了，库克上任以后发布的产品都让大家大跌眼镜！苹果公司业绩下滑！这样又使一些顾客对苹果公司失去了信心，很难相信再生产出好产品！苹果公司唯一解救当前的僵局就只有替换CEO了！就应该换CEO了，库克上任以后发布的产品都让大家大跌眼镜！苹果公司业绩下滑！这样又使一些顾客对苹果公司失去了信心，很难相信再生产出好产品！苹果公司唯一解救当前的僵局就只有替换CEO了！就应该换CEO了，库克上任以后发布的产品都让大家大跌眼镜！苹果公司业绩下滑！这样又使一些顾客对苹果公司失去了信心，很难相信再生产出好产品！苹果公司唯一解救当前的僵局就只有替换CEO了！就应该换CEO了，库克上任以后发布的产品都让大家大跌眼镜！苹果公司业绩下滑！这样又使一些顾客对苹果公司失去了信心，很难相信再生产出好产品！苹果公司唯一解救当前的僵局就只有替换CEO了！就应该换CEO了，库克上任以后发布的产品都让大家大跌眼镜！苹果公司业绩下滑！这样又使一些顾客对苹果公司失去了信心，很难相信再生产出好产品！苹果公司唯一解救当前的僵局就只有替换CEO了！就应该换CEO了，库克上任以后发布的产品都让大家大跌眼镜！苹果公司业绩下滑！这样又使一些顾客对苹果公司失去了信心，很难相信再生产出好产品！苹果公司唯一解救当前的僵局就只有替换CEO了！就应该换CEO了，库克上任以后发布的产品都让大家大跌眼镜！苹果公司业绩下滑！这样又使一些顾客对苹果公司失去了信心，很难相信再生产出好产品！苹果公司唯一解救当前的僵局就只有替换CEO了！就应该换CEO了，库克上任以后发布的产品都让大家大跌眼镜！苹果公司业绩下滑！这样又使一些顾客对苹果公司失去了信心，很难相信再生产出好产品！苹果公司唯一解救当前的僵局就只有替换CEO了！就应该换CEO了，库克上任以后发布的产品都让大家大跌眼镜！苹果公司业绩下滑！这样又使一些顾客对苹果公司失去了信心，很难相信再生产出好产品！苹果公司唯一解救当前的僵局就只有替换CEO了！就应该换CEO了，库克上任以后发布的产品都让大家大跌眼镜！苹果公司业绩下滑！这样又使一些顾客对苹果公司失去了信心，很难相信再生产出好产品！苹果公司唯一解救当前的僵局就只有替换CEO了！就应该换CEO了，库克上任以后发布的产品都让大家大跌眼镜！苹果公司业绩下滑！这样又使一些顾客对苹果公司失去了信心，很难相信再生产出好产品！苹果公司唯一解救当前的僵局就只有替换CEO了！就应该换CEO了，库克上任以后发布的产品都让大家大跌眼镜！苹果公司业绩下滑！这样又使一些顾客对苹果公司失去了信心，很难相信再生产出好产品！苹果公司唯一解救当前的僵局就只有替换CEO了！就应该换CEO了，库克上任以后发布的产品都让大家大跌眼镜！苹果公司业绩下滑！这样又使一些顾客对苹果公司失去了信心，很难相信再生产出好产品！苹果公司唯一解救当前的僵局就只有替换CEO了！就应该换CEO了，库克上任以后发布的产品都让大家大跌眼镜！苹果公司业绩下滑！这样又使一些顾客对苹果公司失去了信心，很难相信再生产出好产品！苹果公司唯一解救当前的僵局就只有替换CEO了！就应该换CEO了，库克上任以后发布的产品都让大家大跌眼镜！苹果公司业绩下滑！这样又使一些顾客对苹果公司失去了信心，很难相信再生产出好产品！苹果公司唯一解救当前的僵局就只有替换CEO了！就应该换CEO了，库克上任以后发布的产品都让大家大跌眼镜！苹果公司业绩下滑！这样又使一些顾客对苹果公司失去了信心，很难相信再生产出好产品！苹果公司唯一解救当前的僵局就只有替换CEO了！就应该换CEO了，库克上任以后发布的产品都让大家大跌眼镜！苹果公司业绩下滑！这样又使一些顾客对苹果公司失去了信心，很难相信再生产出好产品！苹果公司唯一解救当前的僵局就只有替换CEO了！就应该换CEO了，库克上任以后发布的产品都让大家大跌眼镜！苹果公司业绩下滑！这样又使一些顾客对苹果公司失去了信心，很难相信再生产出好产品！苹果公司唯一解救当前的僵局就只有替换CEO了！就应该换CEO了，库克上任以后发布的产品都让大家大跌眼镜！苹果公司业绩下滑！这样又使一些顾客对苹果公司失去了信心，很难相信再生产出好产品！苹果公司唯一解救当前的僵局就只有替换CEO了！就应该换CEO了，库克上任以后发布的产品都让大家大跌眼镜！苹果公司业绩下滑！这样又使一些顾客对苹果公司失去了信心，很难相信再生产出好产品！苹果公司唯一解救当前的僵局就只有替换CEO了！就应该换CEO了，库克上任以后发布的产品都让大家大跌眼镜！苹果公司业绩下滑！这样又使一些顾客对苹果公司失去了信心，很难相信再生产出好产品！苹果公司唯一解救当前的僵局就只有替换CEO了！就应该换CEO了，库克上任以后发布的产品都让大家大跌眼镜！苹果公司业绩下滑！这样又使一些顾客对苹果公司失去了信心，很难相信再生产出好产品！苹果公司唯一解救当前的僵局就只有替换CEO了！就应该换CEO了，库克上任以后发布的产品都让大家大跌眼镜！苹果公司业绩下滑！这样又使一些顾客对苹果公司失去了信心，很难相信再生产出好产品！苹果公司唯一解救当前的僵局就只有替换CEO了！就应该换CEO了，库克上任以后发布的产品都让大家大跌眼镜！苹果公司业绩下滑！这样又使一些顾客对苹果公司失去了信心，很难相信再生产出好产品！苹果公司唯一解救当前的僵局就只有替换CEO了！
 21               
 22                   
 23            </div>
 24       </div>
 25       
 26       
 27 <script type="text/javascript">
 28 /***************
 29   //自定义滚动条
 30   //支持横向和纵向
 31   //time：2013-4-1
 32 ***************/
 33 scrollBar({
 34              scrollBarBox:"f",//滑块容器id
 35             scrollBar:"z",//滑块id
 36             txtBox:"box",//滑动文本的展示id
 37             scrollTxtBox:"txt",//滑动文本的容器id
 38             direction:"longitudinal"//滑动条方向,横向：transverse，纵向：longitudinal    
 39           });
 40 
 41 function scrollBar(obj){
 42         var zbox=document.getElementById(obj.scrollBar);
 43             var fbox=document.getElementById(obj.scrollBarBox);
 44             var rbox=document.getElementById(obj.txtBox);
 45             var tbox=document.getElementById(obj.scrollTxtBox);
 46             var Cbox_w=zbox.offsetWidth;
 47             var Pbox_w=fbox.offsetWidth;
 48             var Cbox_h=zbox.offsetHeight;
 49             var Pbox_h=fbox.offsetHeight;
 50             var tbox_h=tbox.offsetHeight;
 51             var rbox_h=rbox.offsetHeight;
 52             var mX,mY,marleft,martop,boxX,boxY;
 53             zbox.onmousedown=function(e){
 54              var eve=e||window.event;
 55              boxX=zbox.offsetLeft;
 56              boxY=zbox.offsetTop;
 57              mX=eve.clientX-boxX;
 58              mY=eve.clientY-boxY;
 59                      if(zbox.setCapture){
 60                          zbox.setCapture(); 
 61                      }else{
 62                          
 63                          window.captureEvents(Event.MOUSEMOVE);
 64                      }
 65                     eve.cancelBubble = true;//阻止事件冒泡，防止冲突
 66                     document.onmousemove=function(e){
 67                               var eve=e||window.event; 
 68                               marleft=eve.clientX-mX;
 69                               martop=eve.clientY-mY; 
 70                               if(obj.direction=="longitudinal"){          
 71                                   if( martop<0){      
 72                                      martop=0;  
 73                                   }
 74                                   if( martop>Pbox_h-Cbox_h){
 75                                        martop=Pbox_h-Cbox_h;
 76                                   }
 77                                   zbox.style.top=martop+"px";
 78                                   tbox.style.top=-(tbox_h-rbox_h)*(martop/(Pbox_h-Cbox_h))+"px";
 79                               }else{
 80                                   
 81                                   if( marleft<0){      
 82                                      marleft=0;  
 83                                   }
 84                                   if( marleft>Pbox_w-Cbox_w){
 85                                        marleft=Pbox_w-Cbox_w;
 86                                   }
 87                                   zbox.style.left=marleft+"px";
 88                                   tbox.style.top=-(tbox_h-rbox_h)*(marleft/(Pbox_w-Cbox_w))+"px";
 89                                   
 90                              }
 91 
 92                     }
 93                     document.onmouseup=function(){
 94         
 95                              if(zbox.releaseCapture){
 96                                  zbox.releaseCapture(); 
 97                                  
 98                              }else{
 99                                  
100                                  window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
101                              }
102                              document.onmousemove=null;
103                             document.onmouseup=null;    
104                     }
105             
106             return false;
107              
108             }
109 
110 }
111 
112 
113 </script>
114 
115 
116     </body>
117 </html>
一个不敬业的前端攻城狮
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/chaoming/p/3040675.html