首页 > 代码库 > javascript 实现的scrollbar 兼容ff/chrome/IE

javascript 实现的scrollbar 兼容ff/chrome/IE

在javascript基础类的基础上实现。实现垂直滚动条。

  1 /*node 为需要滚动展示的控件或控件ID 控件会根据其父容器自动设定宽度  */  2   GLOBAL.Component.TinyVScrollBar = function(node)  3   {    4      this._wrapList = GLOBAL.Dom.get(node);  5      if(typeof(this._wrapList) == ‘undefined‘)  6      return;  7      this._wrapBox = this._wrapList.parentNode;  8      if(GLOBAL.TOOL.getNodeSize(this._wrapList).h<=GLOBAL.TOOL.getNodeSize(this._wrapBox).h)  9      return; 10      this._scrollBox = null; 11      this._scrollBar = null; 12      this._scrollBoxID = this._wrapList.getAttribute("id")+"scrollBox"; 13      if(GLOBAL.Dom.get(this._scrollBoxID)) 14      return; 15      this._scrollBarID = this._wrapList.getAttribute("id")+"scrollBar"; 16      this._scale = 0; 17      this._height = 0; 18      this._maxTop = 0; 19      this._ListMaxTop = 0; 20      this._top = 0; 21      /*供事件所用*/ 22      this._disY = 0; 23      this._EventMap = {}; 24      this._bNegNumber = 0; 25      this._ddisY = 0; 26      /*创建div*/ 27      this._scrollBox=document.createElement("div"); 28      this._scrollBox.id = this._scrollBoxID; 29      this._scrollBox.className="js-scrollbox"; 30      this._scrollBox.style.height = this._wrapBox.style.height; 31      this._scrollBar=document.createElement("div"); 32      this._scrollBar.id = this._scrollBarID; 33      this._scrollBar.className ="js-scrollbar"; 34      this._scrollBox.appendChild(this._scrollBar); 35      this._wrapBox.appendChild(this._scrollBox); 36      /*设定宽度 及位置 */ 37      /*父容器position必须为absolute 或者为 relative*/ 38      GLOBAL.Dom.setStyle(this._wrapBox,{‘overflow‘:‘hidden‘}); 39      /*设置wraplist的位置和宽度*/ 40      var v_listWidth = this._wrapBox.clientWidth - 15; 41      GLOBAL.Dom.setStyle(this._wrapList,{‘position‘:‘absolute‘,‘top‘: ‘0px‘,‘left‘: ‘0px‘,‘width‘:v_listWidth+‘px‘}); 42      GLOBAL.Dom.setAttribute(this._wrapBox,{‘tabIndex‘:0}); 43      /*设置scrollbox*/ 44      GLOBAL.Dom.setStyle(this._scrollBox,{‘position‘:‘absolute‘,‘top‘: ‘0px‘,‘left‘: v_listWidth+‘px‘}); 45      /*初始化移动高度*/ 46      this.initScale(); 47      /*绑定事件*/  48      this.bindEvent();      49   } 50   GLOBAL.Component.TinyVScrollBar.prototype.initScale = function(){ 51      this._scale = this._wrapBox.clientHeight / this._wrapList.scrollHeight; 52      this._height = this._scale * this._scrollBox.scrollHeight; 53      this._maxTop = this._scrollBox.scrollHeight - this._height; 54      this._ListMaxTop = this._wrapBox.clientHeight - this._wrapList.scrollHeight; 55      this._scrollBar.style.height = this._height + ‘px‘; 56   } 57   GLOBAL.Component.TinyVScrollBar.prototype.fnScroll=function() { 58     if (this._top < 0) this._top = 0; 59     if (this._top > this._maxTop) this._top = this._maxTop; 60     var scale = this._top / this._maxTop; 61     var listTop = scale * this._ListMaxTop; 62     this._scrollBar.style.top = this._top + ‘px‘; 63     this._wrapList.style.top = listTop + ‘px‘; 64   } 65   GLOBAL.Component.TinyVScrollBar.prototype.bindEvent = function(){ 66     /*绑定滑轮事件*/ 67     this._EventMap._wrapListmousewheel = GLOBAL.Event.on(this._wrapBox,‘mousewheel‘,this.mousewheel,this); 68     this._EventMap._wrapListDOMMouseScroll=GLOBAL.Event.on(this._wrapBox,‘DOMMouseScroll‘,this.mousewheel,this); 69     /*单击事件*/ 70     this._EventMap._scrollBoxclick = GLOBAL.Event.on(this._scrollBox,‘click‘,this.mouseclick,this); 71     this._EventMap._scrollBarclick = GLOBAL.Event.on(this._scrollBar,‘click‘,this.mousecancelclick,this); 72     /*单击拖动事件*/ 73     this._EventMap._scrollBarmousedown = GLOBAL.Event.on(this._scrollBar,‘mousedown‘,this.mousemoveanddown,this); 74     /*鼠标双击事件*/ 75     this._EventMap._scrollBardblclick = GLOBAL.Event.on(this._scrollBar,‘dblclick‘,this.mousedbclick,this); 76     /*键盘事件*/ 77     this._EventMap._wrapBoxkeydown = GLOBAL.Event.on(this._wrapBox,‘keydown‘,this.keyDown,this); 78     /*选择事件*/ 79     this._EventMap._wrapListmousedown = GLOBAL.Event.on(this._wrapBox,‘mousedown‘,this.mousedown,this); 80   } 81   /*定义的事件*/ 82   /*鼠标滑轮*/ 83   GLOBAL.Component.TinyVScrollBar.prototype.mousewheel = function(ev) { 84       ev = ev || event; 85       var fx = ev.wheelDelta || ev.detail; 86       var bDown = true; 87       if (ev.detail) { 88         bDown = fx > 0 ? true: false; 89       } else { 90         bDown = fx > 0 ? false: true; 91       } 92       if (bDown) { 93         this._top += 10; 94       } else { 95         this._top -= 10; 96       } 97       this.fnScroll(); 98       GLOBAL.Event.stopPropagation(ev); 99     };100   /*单击事件*/101    GLOBAL.Component.TinyVScrollBar.prototype.mouseclick = function(ev) {102       ev = ev || event;103       var position = GLOBAL.TOOL.getWindowPosition(this._scrollBox);104       var disY = ev.clientY - position.y;105       this._top = disY-GLOBAL.TOOL.parsePx(this._scrollBar.style.height)/2;106       this.fnScroll();107       GLOBAL.Event.stopPropagation(ev);108     };109     GLOBAL.Component.TinyVScrollBar.prototype.mousecancelclick = function(ev) {110       ev = ev || event;111       GLOBAL.Event.stopPropagation(ev);112     };113     114   /*单击拖动事件*/115   GLOBAL.Component.TinyVScrollBar.prototype.mousemoveanddown = function(ev) {116       ev = ev || event;117       //console.debug("mousemoveanddown");118       //var position = GLOBAL.TOOL.getWindowPosition(this._scrollBox);119       this._disY = ev.clientY;120       //console.debug("a"+this._disY);121       this._EventMap.documentmousemove = GLOBAL.Event.on(document,‘mousemove‘,this.documentmousemove,this);122       this._EventMap.documentmouseup = GLOBAL.Event.on(document,‘mouseup‘,this.documentmousemovecancel,this);123       GLOBAL.Event.stopPropagation(ev);124     };125     GLOBAL.Component.TinyVScrollBar.prototype.documentmousemove = function(ev) {126         ev = ev || event;127         //console.debug("b"+ev.clientY);128         var topY = ev.clientY -this._disY;129         this._disY = ev.clientY;130         this._top +=topY;131         this.fnScroll();132         GLOBAL.Event.stopPropagation(ev);133       };134     GLOBAL.Component.TinyVScrollBar.prototype.documentmousemovecancel = function(ev) {135         ev = ev || event;136         if(this._EventMap.documentmousemove)137         {138           GLOBAL.Event.remove(document,‘mousemove‘,this._EventMap.documentmousemove);139         }140         if(this._EventMap.documentmouseup)141         {142           GLOBAL.Event.remove(document,‘mouseup‘,this._EventMap.documentmouseup);143         }144          GLOBAL.Event.stopPropagation(ev);145       };146       /*鼠标双击事件*/147     GLOBAL.Component.TinyVScrollBar.prototype.mousedbclick = function(ev){148      149       ev = ev || event;150       if(this._bNegNumber == 0)151       {152         this._top +=10;153         if (this._top < 0) this._top = 0;154         if (this._top >= this._maxTop) 155         {156            this._top = this._maxTop;157            this._bNegNumber =1;158         }159       }160       else161       {162         this._top -=10;163         if (this._top <= 0) {164         this._top = 0;165         this._bNegNumber =0;166         }167         if (this._top >= this._maxTop) 168         {169            this._top = this._maxTop;170         }171       }172       this.fnScroll();173       GLOBAL.Event.stopPropagation(ev);174     };175     /*键盘事件*/176     GLOBAL.Component.TinyVScrollBar.prototype.keyDown = function(e)177     {178        e=GLOBAL.Event.getEvent(e);179       var currKey=e.keyCode||e.which||e.charCode; 180        switch(currKey)181        {182           case 38://向上183                this._top -=10;184                if (this._top < 0) this._top = 0;185                break;186           case 40://向下187                this._top +=10;188                if (this._top > this._maxTop) this._top = this._maxTop;189                break;190           default:191        }192        this.fnScroll();193        GLOBAL.Event.stopPropagation(e);194     }195     GLOBAL.Component.TinyVScrollBar.prototype.mouseup = function(ev)196     {197       if(this._EventMap.wraplistdocumentmousemove)198       {199           GLOBAL.Event.remove(document,‘mousemove‘,this._EventMap.wraplistdocumentmousemove);200       }201       if(this._EventMap._wrapListmouseup)202       {203           GLOBAL.Event.remove(document,‘mouseup‘,this._EventMap._wrapListmouseup);204       }205        GLOBAL.Event.stopPropagation(ev);206     }207     208     GLOBAL.Component.TinyVScrollBar.prototype.mousedown = function(ev)209     {210       ev = ev || event;211       this._ddisY = ev.clientY;212       this._EventMap.wraplistdocumentmousemove = GLOBAL.Event.on(document,‘mousemove‘,this.wraplistdocumentmousemove,this);213       this._EventMap._wrapListmouseup = GLOBAL.Event.on(document,‘mouseup‘,this.mouseup,this);214       GLOBAL.Event.stopPropagation(ev);215     }216     217     GLOBAL.Component.TinyVScrollBar.prototype.wraplistdocumentmousemove = function(ev)218     {219        ev = ev || event;220         //console.debug("b"+ev.clientY);221        var position = GLOBAL.TOOL.getWindowPosition(this._wrapBox);222        if(ev.clientY > position.y && ev.clientY<(position.y+this._wrapBox.clientHeight))223        {224          GLOBAL.Event.stopPropagation(ev);  225          return;226        }  227        var topY = ev.clientY -this._ddisY;228        if(topY==0)229        {230          GLOBAL.Event.stopPropagation(ev);  231          return;232        }233        if(topY<0)234        {235          this._ddisY = ev.clientY;236          this._top -=10;237        }238        else239        {240           this._ddisY = ev.clientY;241          this._top +=10;242        }243        this.fnScroll();244        GLOBAL.Event.stopPropagation(ev);245     }

 所使用的css 

 1 .js-scrollbar:hover{ 2   border: 0.5px #0036ff solid ; 3   background-color: #494949; 4   box-shadow: inset 0 0.5px rgba(255,255,255,0.36),0 0 0 1px #6fb5f1; 5   cursor:pointer; 6 } 7  8  9 .js-scrollbar{10   position:relative;11   width:13px;12   height:20px;13   margin-left:auto;14   margin-right:auto;15   background-color: #d9d9d9;16   border-radius: 2px;17 }18 19 .js-scrollbox{20   width:15px;21   border-radius: 2px;22   background-color: #f3faff;23 }

使用为获取要显示的div 的ID, 1 new GLOBAL.Component.TinyVScrollBar("#divID"); 

测试用例:base.js为javascript基础类

  1 <html xmlns="http://www.w3.org/1999/xhtml" debug="true">  2 <head>  3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  4 <script src="http://www.mamicode.com/base.js" type="text/javascript"></script>  5 <title>滚动条测试</title>  6 <style type="text/css">  7 .js-scrollbar:hover{  8   border: 0.5px #0036ff solid ;  9   background-color: #494949; 10   box-shadow: inset 0 0.5px rgba(255,255,255,0.36),0 0 0 1px #6fb5f1; 11   cursor:pointer; 12 } 13  14  15 .js-scrollbar{ 16   position:relative; 17   width:13px; 18   height:20px; 19   margin-left:auto; 20   margin-right:auto; 21   background-color: #d9d9d9; 22   border-radius: 2px; 23 } 24  25 .js-scrollbox{ 26   width:15px; 27   border-radius: 2px; 28   background-color: #f3faff; 29 } 30 </style> 31 <script> 32   /*node 为需要滚动展示的控件或控件ID 控件会根据其父容器自动设定宽度  */ 33   GLOBAL.Component.TinyVScrollBar = function(node) 34   {   35      this._wrapList = GLOBAL.Dom.get(node); 36      if(typeof(this._wrapList) == ‘undefined‘) 37      return; 38      this._wrapBox = this._wrapList.parentNode; 39      if(GLOBAL.TOOL.getNodeSize(this._wrapList).h<=GLOBAL.TOOL.getNodeSize(this._wrapBox).h) 40      return; 41      this._scrollBox = null; 42      this._scrollBar = null; 43      this._scrollBoxID = this._wrapList.getAttribute("id")+"scrollBox"; 44      if(GLOBAL.Dom.get(this._scrollBoxID)) 45      return; 46      this._scrollBarID = this._wrapList.getAttribute("id")+"scrollBar"; 47      this._scale = 0; 48      this._height = 0; 49      this._maxTop = 0; 50      this._ListMaxTop = 0; 51      this._top = 0; 52      /*供事件所用*/ 53      this._disY = 0; 54      this._EventMap = {}; 55      this._bNegNumber = 0; 56      this._ddisY = 0; 57      /*创建div*/ 58      this._scrollBox=document.createElement("div"); 59      this._scrollBox.id = this._scrollBoxID; 60      this._scrollBox.className="js-scrollbox"; 61      this._scrollBox.style.height = this._wrapBox.style.height; 62      this._scrollBar=document.createElement("div"); 63      this._scrollBar.id = this._scrollBarID; 64      this._scrollBar.className ="js-scrollbar"; 65      this._scrollBox.appendChild(this._scrollBar); 66      this._wrapBox.appendChild(this._scrollBox); 67      /*设定宽度 及位置 */ 68      /*父容器position必须为absolute 或者为 relative*/ 69      GLOBAL.Dom.setStyle(this._wrapBox,{‘overflow‘:‘hidden‘}); 70      /*设置wraplist的位置和宽度*/ 71      var v_listWidth = this._wrapBox.clientWidth - 15; 72      GLOBAL.Dom.setStyle(this._wrapList,{‘position‘:‘absolute‘,‘top‘: ‘0px‘,‘left‘: ‘0px‘,‘width‘:v_listWidth+‘px‘}); 73      GLOBAL.Dom.setAttribute(this._wrapBox,{‘tabIndex‘:0}); 74      /*设置scrollbox*/ 75      GLOBAL.Dom.setStyle(this._scrollBox,{‘position‘:‘absolute‘,‘top‘: ‘0px‘,‘left‘: v_listWidth+‘px‘}); 76      /*初始化移动高度*/ 77      this.initScale(); 78      /*绑定事件*/  79      this.bindEvent();      80   } 81   GLOBAL.Component.TinyVScrollBar.prototype.initScale = function(){ 82      this._scale = this._wrapBox.clientHeight / this._wrapList.scrollHeight; 83      this._height = this._scale * this._scrollBox.scrollHeight; 84      this._maxTop = this._scrollBox.scrollHeight - this._height; 85      this._ListMaxTop = this._wrapBox.clientHeight - this._wrapList.scrollHeight; 86      this._scrollBar.style.height = this._height + ‘px‘; 87   } 88   GLOBAL.Component.TinyVScrollBar.prototype.fnScroll=function() { 89     if (this._top < 0) this._top = 0; 90     if (this._top > this._maxTop) this._top = this._maxTop; 91     var scale = this._top / this._maxTop; 92     var listTop = scale * this._ListMaxTop; 93     this._scrollBar.style.top = this._top + ‘px‘; 94     this._wrapList.style.top = listTop + ‘px‘; 95   } 96   GLOBAL.Component.TinyVScrollBar.prototype.bindEvent = function(){ 97     /*绑定滑轮事件*/ 98     this._EventMap._wrapListmousewheel = GLOBAL.Event.on(this._wrapBox,‘mousewheel‘,this.mousewheel,this); 99     this._EventMap._wrapListDOMMouseScroll=GLOBAL.Event.on(this._wrapBox,‘DOMMouseScroll‘,this.mousewheel,this);100     /*单击事件*/101     this._EventMap._scrollBoxclick = GLOBAL.Event.on(this._scrollBox,‘click‘,this.mouseclick,this);102     this._EventMap._scrollBarclick = GLOBAL.Event.on(this._scrollBar,‘click‘,this.mousecancelclick,this);103     /*单击拖动事件*/104     this._EventMap._scrollBarmousedown = GLOBAL.Event.on(this._scrollBar,‘mousedown‘,this.mousemoveanddown,this);105     /*鼠标双击事件*/106     this._EventMap._scrollBardblclick = GLOBAL.Event.on(this._scrollBar,‘dblclick‘,this.mousedbclick,this);107     /*键盘事件*/108     this._EventMap._wrapBoxkeydown = GLOBAL.Event.on(this._wrapBox,‘keydown‘,this.keyDown,this);109     /*选择事件*/110     this._EventMap._wrapListmousedown = GLOBAL.Event.on(this._wrapBox,‘mousedown‘,this.mousedown,this);111   }112   /*定义的事件*/113   /*鼠标滑轮*/114   GLOBAL.Component.TinyVScrollBar.prototype.mousewheel = function(ev) {115       ev = ev || event;116       var fx = ev.wheelDelta || ev.detail;117       var bDown = true;118       if (ev.detail) {119         bDown = fx > 0 ? true: false;120       } else {121         bDown = fx > 0 ? false: true;122       }123       if (bDown) {124         this._top += 10;125       } else {126         this._top -= 10;127       }128       this.fnScroll();129       GLOBAL.Event.stopPropagation(ev);130     };131   /*单击事件*/132    GLOBAL.Component.TinyVScrollBar.prototype.mouseclick = function(ev) {133       ev = ev || event;134       var position = GLOBAL.TOOL.getWindowPosition(this._scrollBox);135       var disY = ev.clientY - position.y;136       this._top = disY-GLOBAL.TOOL.parsePx(this._scrollBar.style.height)/2;137       this.fnScroll();138       GLOBAL.Event.stopPropagation(ev);139     };140     GLOBAL.Component.TinyVScrollBar.prototype.mousecancelclick = function(ev) {141       ev = ev || event;142       GLOBAL.Event.stopPropagation(ev);143     };144     145   /*单击拖动事件*/146   GLOBAL.Component.TinyVScrollBar.prototype.mousemoveanddown = function(ev) {147       ev = ev || event;148       console.debug("mousemoveanddown");149       //var position = GLOBAL.TOOL.getWindowPosition(this._scrollBox);150       this._disY = ev.clientY;151       //console.debug("a"+this._disY);152       this._EventMap.documentmousemove = GLOBAL.Event.on(document,‘mousemove‘,this.documentmousemove,this);153       this._EventMap.documentmouseup = GLOBAL.Event.on(document,‘mouseup‘,this.documentmousemovecancel,this);154       GLOBAL.Event.stopPropagation(ev);155     };156     GLOBAL.Component.TinyVScrollBar.prototype.documentmousemove = function(ev) {157         ev = ev || event;158         //console.debug("b"+ev.clientY);159         var topY = ev.clientY -this._disY;160         this._disY = ev.clientY;161         this._top +=topY;162         this.fnScroll();163         GLOBAL.Event.stopPropagation(ev);164       };165     GLOBAL.Component.TinyVScrollBar.prototype.documentmousemovecancel = function(ev) {166         ev = ev || event;167         if(this._EventMap.documentmousemove)168         {169           GLOBAL.Event.remove(document,‘mousemove‘,this._EventMap.documentmousemove);170         }171         if(this._EventMap.documentmouseup)172         {173           GLOBAL.Event.remove(document,‘mouseup‘,this._EventMap.documentmouseup);174         }175          GLOBAL.Event.stopPropagation(ev);176       };177       /*鼠标双击事件*/178     GLOBAL.Component.TinyVScrollBar.prototype.mousedbclick = function(ev){179       console.debug("mousedbclick");180       ev = ev || event;181       if(this._bNegNumber == 0)182       {183         this._top +=10;184         if (this._top < 0) this._top = 0;185         if (this._top >= this._maxTop) 186         {187            this._top = this._maxTop;188            this._bNegNumber =1;189         }190       }191       else192       {193         this._top -=10;194         if (this._top <= 0) {195         this._top = 0;196         this._bNegNumber =0;197         }198         if (this._top >= this._maxTop) 199         {200            this._top = this._maxTop;201         }202       }203       this.fnScroll();204       GLOBAL.Event.stopPropagation(ev);205     };206     /*键盘事件*/207     GLOBAL.Component.TinyVScrollBar.prototype.keyDown = function(e)208     {209        e=GLOBAL.Event.getEvent(e);210       var currKey=e.keyCode||e.which||e.charCode; 211        switch(currKey)212        {213           case 38://向上214                this._top -=10;215                if (this._top < 0) this._top = 0;216                break;217           case 40://向下218                this._top +=10;219                if (this._top > this._maxTop) this._top = this._maxTop;220                break;221           default:222        }223        this.fnScroll();224        GLOBAL.Event.stopPropagation(e);225     }226     GLOBAL.Component.TinyVScrollBar.prototype.mouseup = function(ev)227     {228       if(this._EventMap.wraplistdocumentmousemove)229       {230           GLOBAL.Event.remove(document,‘mousemove‘,this._EventMap.wraplistdocumentmousemove);231       }232       if(this._EventMap._wrapListmouseup)233       {234           GLOBAL.Event.remove(document,‘mouseup‘,this._EventMap._wrapListmouseup);235       }236        GLOBAL.Event.stopPropagation(ev);237     }238     239     GLOBAL.Component.TinyVScrollBar.prototype.mousedown = function(ev)240     {241       ev = ev || event;242       this._ddisY = ev.clientY;243       this._EventMap.wraplistdocumentmousemove = GLOBAL.Event.on(document,‘mousemove‘,this.wraplistdocumentmousemove,this);244       this._EventMap._wrapListmouseup = GLOBAL.Event.on(document,‘mouseup‘,this.mouseup,this);245       GLOBAL.Event.stopPropagation(ev);246     }247     248     GLOBAL.Component.TinyVScrollBar.prototype.wraplistdocumentmousemove = function(ev)249     {250        console.debug("开始");251        console.debug(ev.clientY);252        ev = ev || event;253         //console.debug("b"+ev.clientY);254        var position = GLOBAL.TOOL.getWindowPosition(this._wrapBox);255        if(ev.clientY > position.y && ev.clientY<(position.y+this._wrapBox.clientHeight))256        {257          GLOBAL.Event.stopPropagation(ev);  258          return;259        }  260        var topY = ev.clientY -this._ddisY;261        if(topY==0)262        {263          GLOBAL.Event.stopPropagation(ev);  264          return;265        }266        if(topY<0)267        {268          this._ddisY = ev.clientY;269          this._top -=10;270        }271        else272        {273           this._ddisY = ev.clientY;274          this._top +=10;275        }276        this.fnScroll();277        GLOBAL.Event.stopPropagation(ev);278     }279     280 </script>281 </head>282 <body>283    <div style="position:relative;width:400px;height:500px;border:1px #353535 solid;"><div id="test">aaaaa<br/>aaaaa<br/>aaaaa<br/>aaaaa<br/>aaaaa<br/>aaaaa<br/>aaaaa<br/>aaaaa<br/>aaaaa<br/>aaaaa<br/>aaaaa<br/>aaaaa<br/>aaaaa<br/>aaaaa<br/>aaaaa<br/>aaaaa<br/>aaaaa<br/>aaaaa<br/>aaaaa<br/>aaaaa<br/>aaaaa<br/>aaaaa<br/>aaaaa<br/>aaaaa<br/>aaaaa<br/>aaaaa<br/>aaaaa<br/>aaaaa<br/>aaaaa<br/>aaaaa<br/>aaaaa<br/>aaaaa<br/>aaaaa<br/>aaaaa<br/>aaaaa<br/>aaaaa<br/>aaaaa<br/>aaaaa<br/>aaaaa<br/>aaaaa<br/>aaaaa<br/>aaaaa<br/>aaaaa<br/>aaaaa<br/>aaaaa<br/>aaaaa<br/>aaaaa<br/>aaaaa<br/>aaaaa<br/>aaaaa<br/>aaaaa<br/>aaaaa<br/>aaaaa<br/>aaaaa<br/>aaaaa<br/>aaaaa<br/>aaaaa<br/></div>284 </body>285 286         <script type="text/javascript">287              new GLOBAL.Component.TinyVScrollBar(‘test‘);288         </script>289 </html>

 

javascript 实现的scrollbar 兼容ff/chrome/IE