javascript模拟滚动条实现代码（3）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <meta name="robots" content="all" /> <style type="text/css"> * {margin:0; padding:0; } body {padding:50px; font-size:12px; line-height:18px; } #scrollBox, #scrollBox2 {100px; height:200px; border-right:1px solid #f00; padding:0 5px 0 0; position:relative;} .scrollContent {height:200px; background:#efefef; overflow:hidden;} .scrollBar {6px; height:20px; background:#ccc; position:absolute; right:-4px; top:0; } </style> </head> <body> <div id="scrollBox"> <div class="scrollContent"> <ul> <li>GS安全标准，确保燃烧充分，并时刻监测家中用气环境，安全无忧</li> <li>无线穿墙遥控技术，能穿三层墙，遥控三十米</li> <li>精确恒温技术，出水温度偏差不超过±1℃</li> <li>无暇外观设计，生活细添精致品味</li> </ul> </div> </div><br /> <div id="scrollBox2"> <div class="scrollContent"> <ul> <li>GS安全标准，确保燃烧充分，并时刻监测家中用气环境，安全无忧</li> <li>无线穿墙遥控技术，能穿三层墙，遥控三十米</li> <li>精确恒温技术，出水温度偏差不超过±1℃</li> <li>无暇外观设计，生活细添精致品味</li> <li>德国schott微晶面板，科技与艺术的完美融合</li> <li>断电记忆功能，通电后自动恢复到上一次设定水温</li> <li>浴缸注水功能,自由选择洗浴方式</li> <li>智能风压技术，安全智能控制</li> <li>LED显示，智能触摸按键</li> <li>节水设计，显示水量消耗，提醒节约用水</li> <li>3L/min超低水流启动，不受水压限制，满足高层用户及低水压用户需求</li> <li>多重安全保护，时刻呵护家人</li> </ul> </div> </div> <script type="text/javascript"> function scroll(id){ var self = this; this.obj = document.getElementById(id); this.content = this.obj.getElementsByTagName('div')[0]; this.bar = document.createElement('div'); this.bar.className = 'scrollBar'; this.bar.style.marginTop = 0; this.bar.style.height = parseInt( this.obj.offsetHeight / this.content.scrollHeight * this.obj.offsetHeight) + 'px'; //parseInt(this.area.offsetHeight/this.area.scrollHeight * (this.bar.offsetHeight - this.arrowUpHeight - this.arrowDownHeight)); // this.bar.innerHTML = id; this.obj.appendChild( this.bar ); this.bar.y; this.srcElement; this.marginTop; this.bar.onmousedown = function(e){ self.mousedown(e); } } scroll.prototype = { mousedown:function(e){ var self = this; var e = e || window.event; self.bar.y = e.clientY; self.bar.t = parseInt( self.bar.style.marginTop ); document.onmousemove = function(e){ self.mousemove(e); } stopDefault(e); }, mousemove:function(e){ var e = e || window.event; this.marginTop = this.bar.t + ( e.clientY - this.bar.y ); if( this.marginTop < 0 ) { this.marginTop = 0; } if( this.marginTop > this.obj.clientHeight - this.bar.offsetHeight ){ this.marginTop = this.obj.clientHeight - this.bar.offsetHeight; } this.bar.style.marginTop = this.marginTop + 'px'; this.content.scrollTop = ( this.content.scrollHeight - this.obj.offsetHeight ) * parseInt( this.marginTop ) / ( this.obj.clientHeight - this.bar.clientHeight ); document.onmouseup = function(e){ document.onmousemove = null; } stopDefault(e); } } function stopDefault( e ) { if ( e && e.preventDefault ) e.preventDefault(); else window.event.returnValue = false; return false; } var p = new scroll ('scrollBox' ); var p2 = new scroll ('scrollBox2' ); </script> </body> </html>

*来源于网络