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

最新推荐文章于 2022-06-07 11:56:44 发布

weixin_34235105

最新推荐文章于 2022-06-07 11:56:44 发布

阅读量425

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/jiji262/archive/2012/06/13/2547618.html

版权

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

<!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

转载于:https://www.cnblogs.com/jiji262/archive/2012/06/13/2547618.html

weixin_34235105

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Javascript实现页面内元素添加滚动条

无需多言，直接上代码，高度超过时自动显示滚动条，不超过高度时隐藏滚动条。<!DOCTYPE html><html><head><meta charset=utf-8 /><title>JS Bin</title><style> article, aside, figure, foo...
复制链接

扫一扫