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;
结论：不同的浏览器在解析内部元素高于外层元素的时，对于下padding的计算方式有偏差，这是一个CSS兼容问题，目前原因不详，但是可以确定这是一个坑，其他浏览器目前还没有测试过，应该也会有这样的问题。
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
