注册 | 登录 | 设为首页 | 加入收藏
您当前的位置:飞翔学院-IT中国 → 编程开发JavaScript → 文章内容

scrollTop、scrollLeft、scrollWidth、scrollHeight

作者:佚名 来源:不详 发布时间:2008-5-23 9:14:44

scrollTop 是“卷”起来的高度值,示例:

<div style="width:100px;height:100px;background-color:#FF0000;overflow:hidden;" id="p">
<div style="width:50px;height:300px;background-color:#0000FF;" id="t">如果为 p 设置了 scrollTop,这些内容可能不会完全显示。</div>
</div>
<script type="text/javascript">
var p = document.getElementById("p");
p.scrollTop = 10;
</script>

由于为外层元素 p 设置了 scrollTop,所以内层元素会向上卷。

scrollLeft 也是类似道理。

我们已经知道 offsetHeight 是自身元素的宽度。

而 scrollHeight 是内部元素的绝对宽度,包含内部元素的隐藏的部分。

上述中 p 的 scrollHeight 为 300,而 p 的 offsetHeight 为 100。

scrollWidth 也是类似道理。

IE 和 FireFox 全面支持,而 Netscape 8 和 Opera 7.6 不支持 scrollTop、scrollLeft(document.body 除外)。

应用示例,请点击这里。

请参阅:offsetTop、offsetLeft、offsetWidth、offsetHeight。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>clientHeight、offsetHeight和scrollHeight - 千一网络</title>
<style type="text/css">
/*
#info
{
    width:2000px;
}
*/
</style>
</head>
<body>

<div id="info"></div>
<script type="text/javascript">
<!--
var info = document.getElementById("info");
var infoStr = "";

function SetInfoStr()
{
    infoStr += "info.style.width = " + info.style.width + "<br>" +
               "info.style.height = " + info.style.height + "<br>" +
               "document.body.clientHeight = " + document.body.clientHeight + "<br>" +
               "document.body.offsetHeight = " + document.body.offsetHeight + "<br>" +
               "document.body.scrollHeight = " + document.body.scrollHeight + "<br><br>";
}

info.style.width = "0px";
info.style.height = "0px";
SetInfoStr();

info.style.width = "2000px";
info.style.height = "0px";
SetInfoStr();

info.style.width = "0px";
info.style.height = "2000px";
SetInfoStr();

info.style.width = "2000px";
info.style.height = "2000px";
SetInfoStr();

info.innerHTML = infoStr;
-->
</script>
<!--
不同的 DOCTYPE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
<html xmlns="http://www.w3.org/1999/xhtml"; >

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
-->

</body>
</html>

  • 打印文档
  • 推荐好友
  • 返回顶部
  • 增大字体
  • 减少字体
关于本站 | 工作机会 | 合作网站 | 广告服务 | 市场合作| 联系我们 | 抽奖活动
版权所有: 武汉威俊科技有限公司 Copyright 2005-2007 www.ITCNW.COM All rights reserved