[原创]js Scroll 文本区域滚动条

做前台页面的时候，经常会困扰于一个问题：页面个别页面内容太长，影响了页面布局美观；甚至显示区域的大小是固定的，超出了范围很可能会把页面撑开，布局和美观都无从说起了！
对于解决这类问题我们有两种常规的思路：1、Iframe；2、style="overflow:scroll".
这两种方法固然简单可行，不过依然没有能够做到美观，因为可能会出现浏览器的滚动条。有人说：我用css来修饰一下滚动条的样式不就OK了吗？但是这种办法只在IE5-6生效，在其他浏览器中依然不爽！
如果Cancel掉上面两种办法，我们还可以用两种BT一点的解决方法：1、Flash；2、Js
用Flash这个很容易想象得到，不过为了解决这个问题而用Flash的人几乎找不到，因为实在太小题大作了。我们的首选应该还是Js。

以前用过一个鬼佬写的jsScrollBar(网址：http://www.n-son.com/)，感觉还可以，不过它不能同时在一个页面里面用两次，至少IE是不行的报脚本错误，这点比较郁闷~

心血来潮之下，自己也写了一个js Scroll来玩玩。虽然滚动的花样没有鬼佬的那么多，但是感觉也够用了。有兴趣的朋友可以帮忙改进一下~

演示：
http://demo.chenreal.com/scroll/

Javascript代码：

 <!--
function InitScrollBar(txtBox,txtContent,txtTrack,txtHandle,vHeight){
    //对象初始化
    var ObjScroll = new Object();
    ObjScroll.MaxScroll = vHeight;
    ObjScroll.ScrollBox = document.getElementById(txtBox);
 ObjScroll.ScrollContent = document.getElementById(txtContent);
 ObjScroll.ScrollTrack = document.getElementById(txtTrack);
 ObjScroll.ScrollHandle = document.getElementById(txtHandle);
 //对象不存在
    if(!(ObjScroll.ScrollBox && ObjScroll.ScrollContent && ObjScroll.ScrollTrack  && ObjScroll.ScrollHandle)){
        ObjScroll.ScrollTrack.style.display = "none";
        return;
    }
    //初始化元件高度、位置
 ObjScroll.ScrollAmount = ObjScroll.ScrollContent.offsetHeight/ObjScroll.MaxScroll;
 if(ObjScroll.ScrollAmount>1){
  ObjScroll.ScrollHandle.onmousedown = function(e){
      if (!e)
            e = window.event;
      beginDrag(e);
  }
  if(document.all){
      ObjScroll.ScrollContent.onmousewheel = function(){wheelScroll(event);}
  }
  else{
      ObjScroll.ScrollContent.addEventListener("DOMMouseScroll", wheelScroll, false);
  }
  ObjScroll.ScrollTrack.style.height = ObjScroll.MaxScroll+2 + "px";
  ObjScroll.ScrollBox.style.height = ObjScroll.MaxScroll + "px"; 
  ObjScroll.ScrollHandle.style.marginTop = "0px";
  ObjScroll.ScrollHandle.style.height = Math.floor(ObjScroll.MaxScroll/ObjScroll.ScrollAmount) + "px";
  ObjScroll.MaxLength =  ObjScroll.MaxScroll - Math.floor(ObjScroll.MaxScroll/ObjScroll.ScrollAmount);
    
 }
 else{
  ObjScroll.ScrollTrack.style.display = "none";
 }
 //鼠标滚轮事件
 function wheelScroll(event){
     var wAmount = event.wheelDelta;
     if(!wAmount) wAmount = -event.detail*40;    
     ObjScroll.ScrollBox.scrollTop -= wAmount/12;
     if(ObjScroll.ScrollBox.scrollTop == 0) {
         ObjScroll.ScrollHandle.style.marginTop = "0px";
     }
     else if(ObjScroll.ScrollBox.scrollTop == ObjScroll.ScrollContent.offsetHeight - ObjScroll.MaxScroll){
         ObjScroll.ScrollHandle.style.marginTop = ObjScroll.MaxLength +"px";
     }
     else{
         ObjScroll.ScrollHandle.style.marginTop = parseInt(ObjScroll.ScrollHandle.style.marginTop) - Math.floor(wAmount/(12*ObjScroll.ScrollAmount)) + "px";
     }
     if(parseInt(ObjScroll.ScrollHandle.style.marginTop) > ObjScroll.MaxLength) ObjScroll.ScrollHandle.style.marginTop = ObjScroll.MaxLength +"px";
 }
 //拖动滚动条事件
 function beginDrag(event) {
        var deltaY = event.clientY - parseInt(ObjScroll.ScrollHandle.style.marginTop);       
        document.onmousemove = moveHandler;
        document.onmouseup = upHandler;
     document.onmouseout = outHandler; 
     if(document.all) ObjScroll.ScrollHandle.setCapture();
        //鼠标拖动事件
        function moveHandler(e) {
            if (!e)
            e = window.event;
            ObjScroll.ScrollHandle.style.marginTop = (e.clientY - deltaY) + "px";
            if((e.clientY - deltaY)<0)
      {ObjScroll.ScrollHandle.style.marginTop = 0 +"px";}
            else if((e.clientY - deltaY)>ObjScroll.MaxLength){ObjScroll.ScrollHandle.style.marginTop = ObjScroll.MaxLength +"px";}
      else{
       ObjScroll.ScrollBox.scrollTop = Math.floor((e.clientY - deltaY ) * ObjScroll.ScrollAmount);   
      }
        }
        //鼠标释放
        function upHandler(e){
            if (!e) e = window.event;
            document.onmouseup = "";
            document.onmousemove = "";
      document.onmouseout = "";
      if(document.all) ObjScroll.ScrollHandle.releaseCapture();
        }
     //鼠标移开
     function outHandler(e){
            if (!e) e = window.event;       
            document.onmouseup = "";
            document.onmousemove = "";
      document.onmouseout = "";
      if(document.all) ObjScroll.ScrollHandle.releaseCapture();
        }
    }
}
-->

Html代码：

 <!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>js Scroll Demo </title>
<style type="text/css">
<!--
body {font: Verdana, Arial, Helvetica, sans-serif;background: #666666; margin: 0; padding: 0;text-align: center;color: #000000;}
.container {width: 780px;background: #FFFFFF;margin: 0 auto; border: 1px solid #000000;text-align: left;}
.mainContent {padding: 10px;}
.mainContent h1{text-align: center;}
.slidebar{width:15px;overflow:hidden;background-color:#F0F0F0;}
.scrollbox{float:left; width:450px;overflow:hidden; margin-left:20px; border:1px solid #CCCCCC; font-size:12px; line-height:150%;}
.handle{cursor:pointer; width:13px; background-color:#CFCFCF;border:1px solid #999999;}
-->
</style>
<script language="javascript" src="js/jsScroll.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
window.onload=function(){
 InitScrollBar("scroll","content","scrollbar","handle",200);
 InitScrollBar("scroll2","content2","scrollbar2","handle2",300);
}
</script>
</head>
<body>
<div class="container">
  <div class="mainContent">
 <h1> js Scroll Demo </h1>
 <p>Demo1:高度200px</p>
 <div class="scrollbox" id="scroll">
   <div id="content">
   本报讯（记者周方 通讯员陈伟秋、李国祥）为正确处理电力设施建设与城市环境的关系，科学分析电磁辐射对人体健康的影响，实现科学决策，市政府昨日召开了“电力设施建设与城市环境专家咨询会议”，邀请了全国各地环保、医学、经济、城建与城市规划等领域的20位著名专家，就电力设施建设与城市环境保护问题进行咨询。副市长甘新和市有关部门负责人参加了会议。
<br />
广州现在的电网结构已远远不能满足电力供应需求，面临的严重缺电局面已影响到城市发展和市民日常生活。但是，在电力建设过程中，遇到了很多困难和来自社会的压力。虽然市民普遍对电力建设表示支持，但一涉及到具体项目，仍有一些市民对电力基础设施建设是否影响身体健康心存疑虑。
<br />
对我市电力设施建设与城市环境的问题，市委、市政府高度重视，按照市长张广宁的要求，市政府从广大市民的根本利益出发，邀请来自全国各地的专家进行决策咨询，结合我市经济、社会、环境发展现状和趋势，对电力建设、城市规划和城市环境问题进行深入的探讨和研究，一方面为政府决策提供技术支持，另一方面也是从科学的角度解决市民的疑惑。
<br />
参加此次咨询会的20位专家都是国内在环保、医学、经济、城市建设和规划方面的资深专家，很多是学科研究的带头人，在国内外享有非常高的学术声誉。包括国家环保总局科技顾问委员会委员、国家环境保护总局核安全中心研究员、原国家环境保护总局核环境与辐射环境管理司司长赵亚民等7 位环保方面的专家；中山大学城市与区域研究中心教授、博士生导师魏清泉等3位经济方面的专家；华东电力试验研究院研究员杨新村等7位电力方面的专家；广东省城乡规划设计院总工程师马向明等3位规划方面的专家。
<br />
会议期间，专家们详细了解我市经济、规划和电力建设等方面的情况，对我市的电力设施建设与城市环境等问题进行深入细致的分析，就电网建设对保障经济持续发展及促进居民生活水平提高的重要性和影响关系、城市中心区建设变电站的必要性、如何从城市规划各个层次保障电力设施建设、变电站和高压线产生的工频电场、工频磁场是否对人体健康造成危害等政府和市民关注的问题进行了探讨，为推动我市电力设施建设、保持社会稳定、建设和谐社会提供了科学、权威的意见和建议。
<br />
市政府将本着以人为本、执政为民的科学态度，高度重视专家们的宝贵建议和意见，并作为我市落实科学发展观，指导经济社会发展科学决策的权威依据。
   </div>  
 </div>
    <div class="slidebar" id="scrollbar">     
     <div id="handle" class="handle"></div>     
    </div>
    <p style="clear:both;">Demo2:高度300px</p>
    <div class="scrollbox" id="scroll2">
   <div id="content2">
   本报讯（记者周方 通讯员陈伟秋、李国祥）为正确处理电力设施建设与城市环境的关系，科学分析电磁辐射对人体健康的影响，实现科学决策，市政府昨日召开了“电力设施建设与城市环境专家咨询会议”，邀请了全国各地环保、医学、经济、城建与城市规划等领域的20位著名专家，就电力设施建设与城市环境保护问题进行咨询。副市长甘新和市有关部门负责人参加了会议。
<br />
广州现在的电网结构已远远不能满足电力供应需求，面临的严重缺电局面已影响到城市发展和市民日常生活。但是，在电力建设过程中，遇到了很多困难和来自社会的压力。虽然市民普遍对电力建设表示支持，但一涉及到具体项目，仍有一些市民对电力基础设施建设是否影响身体健康心存疑虑。
<br />
对我市电力设施建设与城市环境的问题，市委、市政府高度重视，按照市长张广宁的要求，市政府从广大市民的根本利益出发，邀请来自全国各地的专家进行决策咨询，结合我市经济、社会、环境发展现状和趋势，对电力建设、城市规划和城市环境问题进行深入的探讨和研究，一方面为政府决策提供技术支持，另一方面也是从科学的角度解决市民的疑惑。
<br />
参加此次咨询会的20位专家都是国内在环保、医学、经济、城市建设和规划方面的资深专家，很多是学科研究的带头人，在国内外享有非常高的学术声誉。包括国家环保总局科技顾问委员会委员、国家环境保护总局核安全中心研究员、原国家环境保护总局核环境与辐射环境管理司司长赵亚民等7 位环保方面的专家；中山大学城市与区域研究中心教授、博士生导师魏清泉等3位经济方面的专家；华东电力试验研究院研究员杨新村等7位电力方面的专家；广东省城乡规划设计院总工程师马向明等3位规划方面的专家。
<br />
会议期间，专家们详细了解我市经济、规划和电力建设等方面的情况，对我市的电力设施建设与城市环境等问题进行深入细致的分析，就电网建设对保障经济持续发展及促进居民生活水平提高的重要性和影响关系、城市中心区建设变电站的必要性、如何从城市规划各个层次保障电力设施建设、变电站和高压线产生的工频电场、工频磁场是否对人体健康造成危害等政府和市民关注的问题进行了探讨，为推动我市电力设施建设、保持社会稳定、建设和谐社会提供了科学、权威的意见和建议。
<br />
市政府将本着以人为本、执政为民的科学态度，高度重视专家们的宝贵建议和意见，并作为我市落实科学发展观，指导经济社会发展科学决策的权威依据。
   </div>  
 </div>
    <div class="slidebar" id="scrollbar2">     
     <div id="handle2" class="handle"></div>     
    </div>
  </div>
</div>
</body>
</html>