模拟滚动条效果

<script language="javascript">
/************************
* Simulate Scroll Bar
* Author: Zhong@IECN
* E-mail: <a href="mailto:[email protected]">[email][email protected][/email]</a>
* 09/24/2004
************************/

var scrollInterval = 10;
var scrollHeight = 170; //高度，注意如果修改这个值，table中也要相应的修改

var scrollTimer;
var scrollBtn;
var mouseInit;
var slideInit;

function uncScroll(oBtn, nStep)
{
var content = oBtn.parentNode.parentNode.parentNode.parentNode.parentNode.previousSibling.childNodes[0].childNodes[0];
var slide = oBtn.parentNode.parentNode.parentNode.rows[1].cells[0].childNodes[0];
var h = content.clientHeight;
if (h <= scrollHeight)
  return;
content.style.pixelTop += nStep;
if (content.style.pixelTop > 0)
  content.style.pixelTop = 0;
if (content.style.pixelTop+h < scrollHeight)
  content.style.pixelTop = scrollHeight - h;
var m = -content.style.pixelTop*(slide.parentNode.clientHeight-slide.clientHeight)/(h-scrollHeight);
slide.style.marginTop = m + "px";
}

function uncSlide(oSlide)
{
var content = oSlide.parentNode.parentNode.parentNode.parentNode.parentNode.previousSibling.childNodes[0].childNodes[0];
var h = content.clientHeight;
if (h <= scrollHeight)
  return;
var m = slideInit + (event.y - mouseInit);
if (m < 0)
  m = 0;
if (m > oSlide.parentNode.clientHeight-oSlide.clientHeight)
  m = oSlide.parentNode.clientHeight-oSlide.clientHeight;
oSlide.style.marginTop = m + "px";
content.style.pixelTop = -m*(h-scrollHeight)/(oSlide.parentNode.clientHeight-oSlide.clientHeight);
}
</script>

<script for="scrollUp" event="ondragstart">
return false;
</script>
<script for="scrollUp" event="onmousedown">
setCapture();
scrollBtn = this;
scrollTimer = setInterval("uncScroll(scrollBtn, 2)", scrollInterval);
</script>
<script for="scrollUp" event="onmouseup">
clearInterval(scrollTimer);
releaseCapture();
</script>

<script for="scrollDown" event="ondragstart">
return false;
</script>
<script for="scrollDown" event="onmousedown">
setCapture();
scrollBtn = this;
scrollTimer = setInterval("uncScroll(scrollBtn, -2)", scrollInterval);
</script>
<script for="scrollDown" event="onmouseup">
clearInterval(scrollTimer);
releaseCapture();
</script>

<script for="scrollSlide" event="ondragstart">
return false;
</script>
<script for="scrollSlide" event="onmousedown">
setCapture();
slideInit = parseInt(this.style.marginTop);
mouseInit = event.y;
</script>
<script for="scrollSlide" event="onmousemove">
if (event.button)
  uncSlide(this);
</script>
<script for="scrollSlide" event="onmouseup">
releaseCapture();
</script>

<table cellpadding="0" cellspacing="0" style="width:143px;height:170px;table-layout:fixed;">
<tr>
  <td rowspan=3 bgcolor="#EEEEEE" valign="top">
    <div style="width:100%;height:170px;overflow:hidden;position:absolute;">
    <div style="position:absolute;left:0px;top:0px;overflow:visible;">
      <!-- 内容部分 Begin -->
      Begin<br>
      内容<br>
      内容<br>
      内容<br>
      内容<br>
      内容<br>
      内容<br>
      内容<br>
      内容<br>
      内容<br>
      内容<br>
      内容<br>
      内容<br>
      内容<br>
      内容<br>
      内容<br>
      内容<br>
      内容<br>
      End<br>
      <!-- 内容部分 End -->
    </div>
    </div>
  </td>
  <td width="12" background="p_w_picpaths/scroll_bg.gif">
    <table cellpadding="0" cellspacing="0" height="100%" width="100%">
    <tr>
      <td height="12"><img src="p_w_picpaths/scroll_up.gif" width="12" height="12" id="scrollUp"></td>
    </tr>
    <tr>
      <td valign="top"><img src="p_w_picpaths/scroll_slide.gif" width="12" height="16"
      id="scrollSlide" style="margin-top:0px;"></td>
    </tr>
    <tr>
      <td height="12"><img src="p_w_picpaths/scroll_down.gif" width="12" height="12" id="scrollDown"></td>
    </tr>
    </table>
  </td>
</tr>
</table>

<br>
<!-- 如果多个，只要复制Table部分就可以了 -->
<table cellpadding="0" cellspacing="0" style="width:143px;height:170px;table-layout:fixed;">
<tr>
  <td rowspan=3 bgcolor="#EEEEEE" valign="top">
    <div style="width:100%;height:170px;overflow:hidden;position:absolute;">
    <div style="position:absolute;left:0px;top:0px;overflow:visible;">
      <!-- 内容部分 Begin -->
      Begin<br>
      内容<br>
      内容<br>
      内容<br>
      内容<br>
      内容<br>
      内容<br>
      内容<br>
      内容<br>
      内容<br>
      内容<br>
      内容<br>
      内容<br>
      内容<br>
      内容<br>
      内容<br>
      内容<br>
      内容<br>
      End<br>
      <!-- 内容部分 End -->
    </div>
    </div>
  </td>
  <td width="12" background="p_w_picpaths/scroll_bg.gif">
    <table cellpadding="0" cellspacing="0" height="100%" width="100%">
    <tr>
      <td height="12"><img src="p_w_picpaths/scroll_up.gif" width="12" height="12" id="scrollUp"></td>
    </tr>
    <tr>
      <td valign="top"><img src="p_w_picpaths/scroll_slide.gif" width="12" height="16"
      id="scrollSlide" style="margin-top:0px;"></td>
    </tr>
    <tr>
      <td height="12"><img src="p_w_picpaths/scroll_down.gif" width="12" height="12" id="scrollDown"></td>
    </tr>
    </table>
  </td>
</tr>
</table>