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

这里之前有误, document.compatMode 可以用来判断是否声明了DTD, 值为"BackCompat":未声明,值为"CSS1Compat":已声明。

所以,判断滚动条是否已拉到页面最底部,可以用如下代码

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
}
}

http://www.cnblogs.com/blackwood/archive/2013/03/12/2955472.html

IE/FF/Chrome下document.documentElement和document.body的 scrollHeight/scrollTop/clientHeight 以及判断滚动条是否已拉到页面最底部的更多相关文章

  1. IE,火狐,谷歌浏览器下js判断滚动条是否已拉到页面最底部

    E/FF/Chrome下document.documentElement和document.body的 scrollHeight/scrollTop/clientHeight 以及判断滚动条是否已拉到 ...

  2. 不同浏览器对document.documentElement和document.body的scrollheight ,scrollTop,clientHeight以及判断滚动条是否滚动到页面最底部 【转载】

    前段时间学习怎么写一个瀑布流的时候,就接触到document.documentElement和document.body的区别,然后今天查资料的时候看到这篇博客,遂转载记录在此. 两种特殊的文档属性可 ...

  3. document.documentElement 和document.body 以及其属性

    js中document.documentElement 和document.body 以及其属性 (原来HTML里是document.body  --XHTML里是document.documentE ...

  4. 点击图片或者鼠标放上hover .图片变大. 1)可以使用css中的transition, transform 2) 预先设置一个 弹出div. 3)弹出层 alert ; 4) 浏览器的宽度document.documentElement.clientWidth || document.body.clientWidth

    变大: 方法一: 利用css属性. 鼠标放上 hover放大几倍. .kecheng_02_cell_content img { /*width: 100px; height: 133px;*/ wi ...

  5. document.documentElement和document.body区别介绍

    document.documentElement和document.body区别介绍 * 区别 body是DOM对象黎明的body子节点,即标签 docummentElement 是整个树的根节点ro ...

  6. IE/FF/Chrome下document.documentElement和document.body的 scrollHeight/scrollTop/clientHeight

    IEdocument.documentElement.scrollHeight  浏览器所有内容高度 ,document.body.scrollHeight  浏览器所有内容高度document.do ...

  7. 【转】document.documentElement和document.body的区别

    转自:http://www.cnblogs.com/ckmouse/archive/2012/01/30/2332070.html 网页中获取滚动条卷去部分的高度,可以通过 document.body ...

  8. document.documentElement和document.body的区别

    网页中获取滚动条卷去部分的高度,可以通过 document.body.scrollTop 来获取,比如使div跟着滚动条滚动: <div id="div" style=&qu ...

  9. document.documentElement和document.body 与document.compatMode的关系

    首先我们看看document.compatMode(兼容模式): document.compatMode它有两种可能的返回值:BackCompat和CSS1Compat, document.compa ...

随机推荐

  1. 关于使用Java开发Mis系统

    如何使用Java开发一个小型的信息管理系统,首先我们应该知道要使用什么样的方法. 1.Java基础 2.JSP+Servlet+JavaBean JSP是服务器端的编程语言,见得比较多的是在一些网站上 ...

  2. Paper Folding UVA - 177 模拟+思路+找规律

    题目:题目链接 思路:1到4是很容易写出来的,我们先考虑这四种情况的绘制顺序 1:ru 2:rulu 3:rululdlu 4:rululdluldrdldlu 不难发现,相较于前一行,每一次增加一倍 ...

  3. 03013_动态页面技术-JSP

    1.jsp的出现 2.jsp脚本和注释 (1)jsp脚本 ①<%java代码%> ----- 内部的java代码翻译到service方法的内部: ②<%=java变量或表达式> ...

  4. ogre3D学习基础19 --- 材质的继承,纹理的滚动与旋转

    以上一节为基础,废话不多说. 首先新增一个节点,用于比较显示 //新增一个节点 ent = mSceneMgr->createEntity("Quad"); ent-> ...

  5. 安装的 Python 版本太多互相干扰?pyenv 建议了解一下。

    写在之前 我们都知道现在的 Python 有 Python2 和 Python3,但是由于各种乱七八糟的原因导致这俩哥们要长期共存,荣辱与共,尴尬的是这哥俩的差异还比较大,在很多时候我们可能要同时用到 ...

  6. docker安装中附带安装的其他软件

    aufs-tools: Tools to manage aufs filesystems. aufs的全称是advanced multi-layered unification filesystem, ...

  7. CentOS6.5 安装中文输入法

    直接转载他人文章:http://hi.baidu.com/dxqt58592/item/a85b96e72c423cc0baf37d3c centos 6.5使用yum安装中文输入法 1.需要root ...

  8. Python面向对象之常用的特殊方法(5)

    Python面向对象里面有很多特殊方法,例如__init__(构造方法),__del__(析构方法),这些方法对于面向对象编程非常重要,下面列出一些常用的特殊方法 (1)__call__ class ...

  9. 牛客多校第六场C

    一个数很大,并不能预处理,所以要进行公式变换,存前一个的值就好 #include <bits/stdc++.h> using namespace std; typedef long lon ...

  10. jsp运行机制

    一.JSP机制概述 可以把执行JSP页面的执行分成两个阶段,一个是转译阶段,一个是请求阶段. 转译阶段:JSP页面转换成Servlet类. 请求阶段:Servlet类执行,将响应结果发送至客户端. 1 ...