IE/FF/Chrome下document.documentElement/body的 scrollHeight/scrollTop/clientHeight 以及判断滚动条是否到达页面底部。
来源:互联网 发布:收银机软件免费 编辑:程序博客网 时间:2024/05/17 22:44
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/FF/Chrome下document.documentElement/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 以及判断滚动条是否已拉
- document.documentElement和document.body的 scrollHeight/scrollTop/clientHeight 以及判断滚动条是否已拉到页面最底部
- 【转】ie/ff/chrome下的document.body和document.documentElement的区别以及滚动条滚动到底
- IE和FF下document.body对象的clientHeight,offsetHeight,scrollHeight的差别
- IE和FF下document.body对象的clientHeight,offsetHeight,scrollHeight的差别
- IE和FF下document.body对象的clientHeight,offsetHeight,scrollHeight的差别
- 判断滚动条是否到达页面底部
- 火狐、谷歌、IE关于document.body.scrollTop和document.documentElement.scrollTop 以及值为0的问题
- 火狐、谷歌、IE关于document.body.scrollTop和document.documentElement.scrollTop 以及值为0的问题
- 火狐、谷歌、IE关于document.body.scrollTop和document.documentElement.scrollTop 以及值为0的问题
- 火狐、谷歌、IE关于document.body.scrollTop和document.documentElement.scrollTop 以及值为0的问题
- 火狐、谷歌、IE关于document.body.scrollTop和document.documentElement.scrollTop 以及值为0的问题
- JavaScript 滚动条示例,控制居中document.documentElement.scrollTop,document.body.scrollTop,oDiv.offsetHeight
- jquery 判断滚动条到达了底部,怎么判断滚动条是否又到达的顶
- centos启动卡住探查方法
- struts2中的拦截器概述和简单例子
- SurfaceView是什么?
- 【自考】——第四次自考的学与思
- Android 传感器开发详解
- IE/FF/Chrome下document.documentElement/body的 scrollHeight/scrollTop/clientHeight 以及判断滚动条是否到达页面底部。
- 第九周项目3(2)----矩阵相加
- EasyUI之对话框Dialog
- java 间断执行多条命令ssh连接,有缺陷
- 【软件项目管理】任务(活动)之间的排序依据主要有:强制性依赖关系、软逻辑关系、外部依赖关系
- R tutorial 16 - Multiple Regression 回归分析 (1)
- LeetCode #438: Find All Anagrams in a String
- echart动态图表
- Shell 脚本简介