1、scrollTop
(1)设置scrollTop
?????????FF、IE8????????使用document.documentElement.scrollTop?=?100;
????????chrome?????????使用document.body.scrollTop?=?100;
(2)取值
?????????scrollTop?=?document.documentElement.scrollTop?+?document.body.scrollTop;???????//兼容
2、scrollHeight
?????计算方法:scrollHeight?=?content.height()?+?padding;?????//padding是上下边距的和
(1)取值
????????FF、IE8????????document.documentElement.scrollHeight?=?body.content.height()?+?margin;
????????????????????????????document.body.scrollHeight?=?body.content.height();
???????chrome?????????document.documentElement.scrollHeight?=?document.body.scrollHeight?=?body.content.height()?+?margin;
???关于scrollHeight的实践,出现了CSS兼容问题
????代码如下:
<!DOCTYPE?html>
<html>
<head>
????<meta?charset="utf-8"?/>
????<title>scrollTop和scrollHeight的区别</title>
????<base?target="_self"?/>
<style?type="text/css">
????#first01{
????????width:200px;height:400px;background-color:red;overflow:auto;margin:20px;padding:10px;
????}
????#words{
????????height:?700px;background-color:?green;
????}
</style>
</head>
<body>
????<div?id="first01">
????????<div?id="words">
????????</div>
????</div>
????
????<div?style="width:200px;height:400px;background-color:blue;"></div>
????<script?type="text/javascript">
????????var?temp?=?document.getElementById("first01");
????????alert(temp.scrollTop);
????????alert(temp.scrollHeight);
????</script>
</body>
</html>
?
效果:
(1)在FF、IE8、IE9下
?
弹出的数据:scrollTop:100;?scrollHeight:710;
(2)在chrome、IE6、IE7、遨游下
?
弹出的数据:scrollTop:0;?scrollHeight:720;
?
转:http://hi.baidu.com/wuqi02/item/b26e113f6fc38ee81b9696d7