IE,火狐,谷歌浏览器下js判断滚动条是否已拉到页面最底部
E/FF/Chrome下document.documentElement和document.body的 scrollHeight/scrollTop/clientHeight 以及判断滚动条是否已拉到页面最底部
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;
所以,判断滚动条是否已拉到页面最底部,可以用如下代码
<script>
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
alert('正在请求数据');
}
}
</script>
IE,火狐,谷歌浏览器下js判断滚动条是否已拉到页面最底部的更多相关文章
- IE/FF/Chrome下document.documentElement和document.body的 scrollHeight/scrollTop/clientHeight 以及判断滚动条是否已拉到页面最底部
DTD已声明 IE document.documentElement.scrollHeight 浏览器所有内容高度 ,document.body.scrollHeight 浏览器所有内容高度 docu ...
- 各种height 以及判断滚动条是否已拉到页面最底部
DTD已声明 IEdocument.documentElement.scrollHeight 浏览器所有内容高度 ,document.body.scrollHeight 浏览器所有内容高度docu ...
- js判断滚动条是否已到页面最底部或顶部实例
原文 本文实例讲述了js判断滚动条是否已到页面最底部或顶部的方法.分享给大家供大家参考.具体分析如下: 我们经常会看到很多的网站一个返回顶部效果就是当我们滚动条到指定位置时返回顶部出来了,否则就自动隐 ...
- js 判断滚动条是否停止滚动
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 一个JS判断客户端是否已安装某个字体(Only IE)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js判断滚动条到底部
判断滚动条到底部,需要用到DOM的三个属性值,即scrollTop.clientHeight.scrollHeight. scrollTop为滚动条在Y轴上的滚动距离. clientHeight为内容 ...
- JS判断滚动条到底部,页面是否有滚动条
要判断页面滚动条是否到底,需要了解三个属性: scrollHeight:获取元素内容高度的度量,包括由于溢出导致的视图中不可见内容,说直白点,算上了滚动条不可见的那部分高度. clientHeight ...
- js 判断滚动条的滚动方向
以下代码实现判断页面的滚动条的滚动方向: var sign = 80;//定义默认的向上滚与向下滚的边界 window.onscroll = window.onresize = function(){ ...
- JS判断滚动条是否停止滚动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- 发现一个时隐时现的bug!
在awk里可以这样使用正则: #截取 a.cn?fr= 中的1211 -]+/) > ) { fr = substr(url,RSTRART + , RLENGTH - ) } #截取 a.cn ...
- hdu 4856 Tunnels
http://acm.hdu.edu.cn/showproblem.php?pid=4856 这道题就是搜索BFS+状压dp,把所经过的隧道的状态用二进制表示,然后dp就行.bfs求出每两个隧道的最短 ...
- CDN和双线机房相比有何优势
1.什么类型的网站最需要CDN? 适合目标客户覆盖全国范围的网站,不论是南方电信.还是北方网通用户.铁通用户,均要求能快速访问到客户网站,彻底解决电信.网通之间的互访瓶颈. 另外国外的网站,如果需要提 ...
- cf435A Queue on Bus Stop
A. Queue on Bus Stop time limit per test 1 second memory limit per test 256 megabytes input standa ...
- 百度搜索URL参数 搜索关键字
http://www.baidu.com/s?wd=关键字 wd(Keyword):查询的关键词: http://www.baidu.com/s?wd=关键字&cl=3 cl(Class):搜 ...
- DLL模块:C++在VS下创建、调用dll
1.dll的优点 代码复用是提高软件开发效率的重要途径.一般而言,只要某部分代码具有通用性,就可将它构造成相对独立的功能模块并在之后的项目中重复使用.比较常见的例子是各种应用程序框架,ATL.MFC等 ...
- 【2012长春区域赛】部分题解 hdu4420—4430
这场比赛特点在于两个简单题太坑,严重影响了心情..导致最后只做出两题....当然也反映出心理素质的重要性 1002: 题意:一个矩阵b[n][n]通过数组 a[n]由以下规则构成,现在已知b[n][n ...
- 素数与素性测试(Miller-Rabin测试)
转载自Matrix大牛的博客 把代码翻译成C++ http://www.matrix67.com/blog/archives/234 题目链接: http://hihocoder.com/proble ...
- mysql-创建函数,存储过程以及视图
1.创建函数 mysql>delimiter // mysql>create function 函数名(参数1 参数1类型,...) returns 返回类型 >be ...
- D - Network - poj3694(LCA求桥)
题意:有一个网络有一些边相互连接,现在有Q次操作,求每次操作后的桥的个数 分析:开始竟然不知道还有LCA这么个东西....... *********************************** ...