js获取不同浏览器盒子宽度高度

 

 

DTD

已声明

 

 

IE 

document.documentElement.scrollHeight  

浏览器所有内容高

度

 ,document.body.scrollHeight  

浏览器所有内容高度

 

document.documentElement.scrollTop  

浏览器滚动部分高度，

document.body.scrollTop 

始终为

0 

document.documentElement.clientHeight  

浏览器可视部分高度，

document.body.clientHeight  

浏览器所有内容高度

 

FF 

document.documentElement.scrollHeight  

浏览器所有内容高

度

 ,document.body.scrollHeight  

浏览器所有内容高度

 

document.documentElement.scrollTop  

浏览器滚动部分高度，

document.body.scrollTop 

始终为

0 

document.documentElement.clientHeight 

浏览器可视部分高度，

document.body.clientHeight  

浏览器所有内容高度

 

Chrome 

document.documentElement.scrollHeight  

浏览器所有内容高度，

 

document.body.scrollHeight  

浏览器所有内容高度

 

document.documentElement.scrollTop 

始终为

0

，

document.body.scrollTop  

浏览器滚动部分高度

 

document.documentElement.clientHeight  

浏览器可视部分高度，

document.body.clientHeight  

浏览器所有内容高度

 

DTD

未声明

 

IE 

document.documentElement.scrollHeight  

浏览器可视部分高度，

document.body.scrollHeight  

浏览器所有内容高度

 

document.documentElement.scrollTop 

始终为

0

，

document.body.scrollTop  

浏览器滚动部分高度

 

document.documentElement.clientHeight 

始终为

0

，

document.body.clientHeight  

浏览器可视部分高度

 

FF 

document.documentElement.scrollHeight  

浏览器可视部分高度

, 

document.body.scrollHeight 

浏览器所有内容高度

 

document.documentElement.scrollTop 

始终为

0

，

document.body.scrollTop 

浏览器滚动部分高度

 

document.documentElement.clientHeight 

浏览器所有内容高度，

document.body.clientHeight 

浏览器可视部分高度

 

Chrome 

document.documentElement.scrollHeight 

浏览器可视部分高

度

,document.body.scrollHeight 

浏览器所有内容高度

 

document.documentElement.scrollTop 

始终为

0

，

document.body.scrollTop 

浏览器滚动部分高度

 

document.documentElement.clientHeight 

浏览器所有内容高度，

document.body.clientHeight 

浏览器可视部分高度

 

 

 

浏览器所有内容高度即浏览器整个框架的高度，

包括滚动条卷去部分

+

可视部分

+

底部隐藏部分的高度总和

 

浏览器滚动部分高度即滚动条卷去部分高度即可视顶端距离整个对象顶端的高

度。

 

综上

 

1

、

document.documentElement.scrollTop

和

document.body.scrollTop

始终有

一个为

0

，所以可以用这两个的和来求

scrollTop 

2

、

scrollHeight

、

clientHeight 

在

DTD

已声明的情况下用

documentElement

，

未声明的情况下用

body 

3

、

document.documentElement.scrollTop

在未声明的情况下始终为

0

，所以可

以用来判断是否声明了

DTD; 

所以，

 

判断滚动条

是否已拉到页面最底部，可以用如下代码

 

window.onscroll = function (){ 

var marginBot = 0; 

if (document.documentElement.scrollTop){ 

marginBot = document.documentElement.scrollHeight 

–

 

(document.documentElement.scrollTop+document.body.scrollTop)-document

.documentElement.clientHeight; 

} else { 

marginBot = document.body.scrollHeight 

–

 

document.body.scrollTop- document.body.clientHeight; 

} 

if(marginBot<=0) { 

//do something 

} 

}