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/ ...
随机推荐
- MSP430单片机的中断
这篇文章是从网上转载过来的,原文章地址:http://www.21ic.com/jichuzhishi/mcu/questions/2012-12-21/154794.html 中断是MSP430微处 ...
- 我只能说,CDH5真的屌爆了!!!
参考URL http://blog.csdn.net/yangzhaohui168/article/details/34185579 http://blog.csdn.net/yangzhaohui1 ...
- ALTIUM DESIGNER怎么定义差分对布线
方法一:第一步是在原理图中声明,这样做的目的是为了让差分对布线器清楚哪两个网络是属于同一组差分对,设计编译器将查找格式为NETNAME_N和NETNAME_P(即以_N和_P为后缀)的两个同名网络.这 ...
- Moxon(摩克森)天线介绍
一.Moxon(摩克森)天线介绍Moxon天线是一种方形天线,性质上类似二单元Yagi(八木),增益高,具有很强的方向性,按尺寸做好后几乎不用调试,阻抗50欧姆.在U段,天线尺寸小,便于携带,是一款非 ...
- El表达式和fn函数一起使用
如下: ${a%1>0?a:(fn:substringBefore(a, "."))}
- curl_easy_setopt-curl库的关键函数之一
函数原型:#include <curl/curl.h>CURLcodecurl_easy_setopt(CURL *handle, CURLoption option, parameter ...
- 简要介绍EF(实体框架)
原文地址:http://wenku.baidu.com/link?url=eutYH1QWA9y7fnxsxT9pZfJTPfa36nCI4R3Ub8Y4ybAVSgmXzEnXHwUj-GPFinn ...
- hdu4111 Alice and Bob
Alice and Bob Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total ...
- ubantu14.04 apache2 支持重写模式
想要开启thinkphp的重写模式,apache必须.htaccess支持, 其他情况也有需要开启.htaccess支持的. 下面是ubantu开启方法: 0. .htaccess这个文件应该放在与入 ...
- 2016-05-I
2016 年上半年软件设计师上午真题 1. VLIW 是( )的简称.A.复杂指令系统计算机 B.超大规模集成电路C.单指令流多数据流 D.超长指令字 2.主存与 Cache 的地址映射方式中,( ) ...