Javascript实现页面内元素添加滚动条

无需多言，直接上代码，高度超过时自动显示滚动条，不超过高度时隐藏滚动条。

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
</style>
</head>
<body>
<div id="divContainer" style="width:200px;overflow-y:auto; overflow-x:hidden; height:200px;border:0px solid red;">
    <div id="divContent" style="width:200px;height:200px;border:0px solid black;">
      <p>测试数据1</p>
      <p>测试数据2</p>
      <p>测试数据3</p>
      <p>测试数据4</p>
      <p>测试数据5</p>
      <p>测试数据6</p>
      <p>测试数据7</p>
      <p>测试数据8</p>
      <p>测试数据9</p>
      <p>测试数据10</p>
      <p>测试数据11</p>
      <p>测试数据12</p>
    </div>
</div>

<script type="text/javascript">

window.onload = function(){ 
    var nScrollHight = document.getElementById("divContent").offsetHeight; //滚动距离总长(注意不是滚动条的长度)
    var nScrollTop = 0;   //滚动到的当前位置
    var nDivHight = document.getElementById("divContainer").offsetHeight; //divContainer的高度
    
    document.getElementById("divContainer").onscroll =function(){   
        nScrollTop = this.scrollTop;//0~250;
        nScrollHight = this.scrollHeight;//750,1000;
        if(nScrollTop + nDivHight >= nScrollHight)
        {
            document.getElementById("divContent").style.height=1000;
            alert("Scroll to Bottom, ScrollTop is:" + nScrollTop);
        }
    }   
}
</script> 
</body>
</html>

Javascript用于检测当前的滚动位置。如果只是显示滚动条，则不需要Javascript代码。

在线演示地址：http://jsbin.com/ulijos

posted @ 2012-06-13 12:24  令狐葱★  阅读(1429)  评论(0)  编辑  收藏  举报