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

  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       else
161       {
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        else
239        {
240           this._ddisY = ev.clientY;
241          this._top +=10;
242        }
243        this.fnScroll();
244        GLOBAL.Event.stopPropagation(ev);
245     }

 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 }

  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="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       else
192       {
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        else
272        {
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>