当前位置: 代码迷 >> Web前端 >> 关于scrollTop跟scrollHeight那点事儿(调研)
  详细解决方案

关于scrollTop跟scrollHeight那点事儿(调研)

热度:614   发布时间:2014-02-23 23:09:50.0
关于scrollTop和scrollHeight那点事儿(调研)

关于scrollTop和scrollHeight那点事儿(调研)

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

  相关解决方案