【转】模拟滚动条

<script language="javascript">
/************************
 * Simulate Scroll Bar
 * Author: Zhong@IECN
 * E-mail: <a href="mailto:zz315@163.com">zz315@163.com</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 -->
          &nbsp;Begin<br>
          &nbsp;内容<br>
          &nbsp;内容<br>
          &nbsp;内容<br>
          &nbsp;内容<br>
          &nbsp;内容<br>
          &nbsp;内容<br>
          &nbsp;内容<br>
          &nbsp;内容<br>
          &nbsp;内容<br>
          &nbsp;内容<br>
          &nbsp;内容<br>
          &nbsp;内容<br>
          &nbsp;内容<br>
          &nbsp;内容<br>
          &nbsp;内容<br>
          &nbsp;内容<br>
          &nbsp;内容<br>
          &nbsp;End<br>
          <!-- 内容部分 End -->
        </div>
      </div>
    </td>
    <td width="12" background="images/scroll_bg.gif">
      <table cellpadding="0" cellspacing="0" height="100%" width="100%">
        <tr>
          <td height="12"><img src="images/scroll_up.gif" width="12" height="12" id="scrollUp"></td>
        </tr>
        <tr>
          <td valign="top"><img src="images/scroll_slide.gif" width="12" height="16"
          id="scrollSlide" style="margin-top:0px;"></td>
        </tr>
        <tr>
          <td height="12"><img src="images/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 -->
          &nbsp;Begin<br>
          &nbsp;内容<br>
          &nbsp;内容<br>
          &nbsp;内容<br>
          &nbsp;内容<br>
          &nbsp;内容<br>
          &nbsp;内容<br>
          &nbsp;内容<br>
          &nbsp;内容<br>
          &nbsp;内容<br>
          &nbsp;内容<br>
          &nbsp;内容<br>
          &nbsp;内容<br>
          &nbsp;内容<br>
          &nbsp;内容<br>
          &nbsp;内容<br>
          &nbsp;内容<br>
          &nbsp;内容<br>
          &nbsp;End<br>
          <!-- 内容部分 End -->
        </div>
      </div>
    </td>
    <td width="12" background="images/scroll_bg.gif">
      <table cellpadding="0" cellspacing="0" height="100%" width="100%">
        <tr>
          <td height="12"><img src="images/scroll_up.gif" width="12" height="12" id="scrollUp"></td>
        </tr>
        <tr>
          <td valign="top"><img src="images/scroll_slide.gif" width="12" height="16"
          id="scrollSlide" style="margin-top:0px;"></td>
        </tr>
        <tr>
          <td height="12"><img src="images/scroll_down.gif" width="12" height="12" id="scrollDown"></td>
        </tr>
      </table>
    </td>
  </tr>
</table>


http://www.iecn.net/bbs/view/12000.html#none