IE/FF/Chrome下document.documentElement/body的 scrollHeight/scrollTop/clientHeight 以及判断滚动条是否到达页面底部。
2016-10-23 16:00
471 查看
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.浏览器所有内容高度即浏览器整个框架的高度,包括滚动条卷去部分+可视部分+底部隐藏部分的高度总和。
2.浏览器滚动部分高度即滚动条卷去部分高度即可视顶端距离整个对象顶端的高度。
综上:
1、document.documentElement.scrollTop和document.body.scrollTop始终有一个为0,所以可以用这两个的和来求scrollTop。
2、scrollHeight、clientHeight 在DTD已声明的情况下用documentElement,未声明的情况下用body。
3.document.compatMode 可以用来判断是否声明了DTD, 值为"BackCompat":未声明,值为"CSS1Compat":已声明。
所以,判断滚动条是否已拉到页面最底部,可以用如下代码:
<span style="font-size:14px;">window.onscroll = function (){
var marginBot = 0;
if (document.compatMode === "CSS1Compat"){
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
}
}</span>
PS:猿猿们有什么想法,可以留言给我呦!
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.浏览器所有内容高度即浏览器整个框架的高度,包括滚动条卷去部分+可视部分+底部隐藏部分的高度总和。
2.浏览器滚动部分高度即滚动条卷去部分高度即可视顶端距离整个对象顶端的高度。
综上:
1、document.documentElement.scrollTop和document.body.scrollTop始终有一个为0,所以可以用这两个的和来求scrollTop。
2、scrollHeight、clientHeight 在DTD已声明的情况下用documentElement,未声明的情况下用body。
3.document.compatMode 可以用来判断是否声明了DTD, 值为"BackCompat":未声明,值为"CSS1Compat":已声明。
所以,判断滚动条是否已拉到页面最底部,可以用如下代码:
<span style="font-size:14px;">window.onscroll = function (){
var marginBot = 0;
if (document.compatMode === "CSS1Compat"){
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
}
}</span>
PS:猿猿们有什么想法,可以留言给我呦!
相关文章推荐
- 不同浏览器对document.documentElement和document.body的scrollheight ,scrollTop,clientHeight以及判断滚动条是否滚动到页面最底部 【转载】
- IE/FF/Chrome下document.documentElement和document.body的 scrollHeight/scrollTop/clientHeight 以及判断滚动条是否已拉到页面最底部
- 不同浏览器对document.documentElement和document.body的scrollheight ,scrollTop,clientHeight以及判断滚动条是否滚动到页面最底部 【转载】
- document.documentElement和document.body的 scrollHeight/scrollTop/clientHeight 以及判断滚动条是否已拉到页面最底部
- IE/FF/Chrome下document.documentElement和document.body的 scrollHeight/scrollTop/clientHeight 以及判断滚动条是否已拉
- IE/FF/Chrome下document.documentElement和document.body的 scrollHeight/scrollTop/clientHeight 以及判断滚动条是否已拉
- IE/FF/Chrome下document.documentElement和document.body的 scrollHeight/scrollTop/clientHeight 以及判断滚动条是否已拉
- IE/FF/Chrome下document.documentElement和document.body的 scrollHeight/scrollTop/clientHeight 以及判断滚动条是否已拉
- JQ判断滚动条是否到达页面底部,流加载
- 判断滚动条是否到达页面底部
- jquery判断页面滚动条(scroll)是上滚还是下滚,且是否滚动到头部或者底部
- jquery判断页面滚动条(scroll)是上滚还是下滚,且是否滚动到头部或者底部
- jquery判断页面滚动条(scroll)是上滚还是下滚,且是否滚动到头部或者底部
- jquery判断页面滚动条(scroll)是上滚还是下滚,且是否滚动到头部或者底部
- jquery判断页面滚动条(scroll)是上滚还是下滚,且是否滚动到头部或者底部
- jquery判断页面滚动条(scroll)是上滚还是下滚,且是否滚动到头部或者底部
- jQuery 的 Div 标签滚动条属性及判断垂直滚动条是否到达底部
- 页面位置 top、postop、scrolltop、offsetTop、scrollHeight、offsetHeight、clientHeight
- js判断滚动条是否到达顶部、底部 兼容各种浏览器
- 判断滚动条是否到达页面的尾部