div 把现有的滑动条改成在底部横向的

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title> Div Scroll Bar </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="Xiaosa"><script language="JavaScript">
<!--//----------------------------------------
// Name:        Div Scroll Bar
// Author:      Xiaosa
// Contact:     [email protected]
// CreateDate: ??-7-11
// LastChange: ??-7-12
//----------------------------------------var mouseInit = slideInit = 0;
var slider, xscroll, nContent,box;
var xH,xT,nSH,nOH;function init(){
    box = document.getElementById("box");
    slider = document.getElementById("slider");
  xscroll = document.getElementById("xscroll");
  nContent = document.getElementById("nContent");
  
  slider.style.left = xscroll.offsetLeft - xscroll.offsetWidth/2-1;
  slider.style.top = xscroll.offsetTop;
  slider.style.visibility = "visible";
  
  xH = xscroll.offsetTop + xscroll.offsetHeight - slider.offsetHeight;
  xT = xscroll.offsetTop;
  nSH = nContent.scrollHeight;
  nOH = nContent.offsetHeight;
    if(nSH <= nContent.clientHeight){
    xscroll.style.visibility = "hidden";
    slider.style.visibility = "hidden";
  }
}function xs_scroll(){
    // Call Init function
  init();  slider.onmousedown =function(){//鼠标按下时滑动
    slider.setCapture();
    mouseInit = event.clientX;// event.clientY;表示 上下滑动，event.clientX表示左右滑动
    slideInit = parseInt(slider.style.marginTop);
    slider.onmousemove= setPos;
  }  slider.onmouseup = document.onmouseup = function(){//鼠标松开时时滑动无效
    slider.onmousemove = "";
    slider.releaseCapture();
  }
  
  box.ondragstart = box.onselectstart = function(){
    //event.returnValue =false;
    //return false;
  }
}
    //设定滑动器位置
function setPos(){
  var m = slideInit + (event.clientX - mouseInit); //(event.clientY - mouseInit);
  if (m < 0) m = 0;//滑块顶端位置
  if (m > xscroll.clientHeight-slider.offsetHeight) m = xscroll.offsetHeight-slider.offsetHeight;//滑块底端位置  slider.style.marginTop = m + "px"; //移动加的像素
  nContent.scrollTop = (nSH-nOH)*parseInt(m)/(xscroll.clientHeight-slider.clientHeight);//文本跟着滑块动
}
//-->
</script>
<style>/* ----------------------- Div Scroll Bar --------------------------------- */  #box {
     background:#fefefe;
     position:relative;
   width:185px;
   height:220px;
  }  #xscroll {
    position:relative;
   float:right;
   left:auto;
   top:auto;
   height:100%;
   width:1px;
   background:red;
  } 
 
  #slider {
     position:absolute;
   left:0px;
   top:0px;
   z-index:1;
   width:5px;
   height:23px;
     visibility:hidden;
   background:darkred;
  }
  #nContent {
   color:#6A2A04;
   position:relative;
   width:180px;
   height:220px;
   overflow:hidden;
   background:#FF9933;
   font-size:9pt;
   font-family:arial;
  }
  </style>
</head><body onload=" xs_scroll();">          <div id="box">
         <div id="xscroll"></div>
         <div id="slider" style="margin-top:0px;"></div>
         <div id="nContent">
          <span style="font-weight:bold">
          欢迎:</span><br /><br />
          * Telecommunications & IT  <br />
          * Real Estate and Property Management
          * Financial Services<br />  
          * Construction<br />
          * FMCG<br />
          * Aviation<br />
          * Pharmaceutical & Healthcare<br />
          * Oil & Gas, Power<br />
          * Auto  <br />
          * Travel & Tourism<br />
          * Retail <br />
          * Advertising & Marketing<br />
          <br />
          <span style="font-weight:bold">我非常讨厌英语 :</span>
          <br /><br />
          * Marketing & Sales  <br />
          * Research & Development <br />
          * Finance & Tax  <br />
          * Manufacturing & Operations <br />
          * Legal Counsel  <br />
          * Customer Services <br />
          * Human Resources <br />
          * Logistic & Supply Chain <br />
          * Public Relations <br />
          * IT <br />
          * Business Development & Strategic Planning
          </div>
        </div>
</body>
</html>