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":已声明。

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

  1. window.onscroll = function (){
  2. var marginBot = 0;
  3. if (document.compatMode === "CSS1Compat"){
  4. marginBot = document.documentElement.scrollHeight - (document.documentElement.scrollTop+document.body.scrollTop)- document.documentElement.clientHeight;
  5. } else {
  6. marginBot = document.body.scrollHeight - document.body.scrollTop- document.body.clientHeight;
  7. }
  8. if(marginBot<=0) {
  9. //do something
  10. }
  11. }

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. 动态规划:HDU1069-Monkey and Banana

    Monkey and Banana Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others ...

  2. 51nod_1255字典序最小的子序列

    作为贪心算法的某道例题,赶脚药丸啊..这么简单的代码重构第三遍才过... 首先是贪心算法思想, 1,证明贪心算法有效性:贪心策略,使用栈结构实现,遍历输入串中所有元素,对于某个元素有如下两种情况: 情 ...

  3. 配置网络策略中的 NAP 条件

    TechNet 库 Windows Server Windows Server 2008 R2 und Windows Server 2008 按类别提供的 Windows Server 内容 Win ...

  4. Group Policy Object Editor

    Group Policy Object Editor   The Group Policy Object Editor is a tool that hosts MMC extension snap- ...

  5. 做一个日收入100元的APP!

    [导语]虽然讲了很多个人开发者的文章,但新手开发者如何赚自己的第一个100块钱,确是最难的事情.群里有人说都不知道干什么 app赚钱,完全没有想法, 并且经常问我有什么快速赚钱的方法.我只能遗憾地说, ...

  6. 【Combination Sum II 】cpp

    题目: Given a collection of candidate numbers (C) and a target number (T), find all unique combination ...

  7. Android onConfigurationChanged用法(规避横竖屏切换导致的重新调用onCreate方法)

    onConfigurationChanged的目的是为了规避横竖屏切换干掉activity而重新调用onCreate方法的问题:有的时候,我们希望重新进入OnCreate生命周期,此时可以调用onSa ...

  8. WordPress 通过文章 URL 获取文章 ID

    // 获取当前文章链接,注意,在文章类型页面的主循环外使用标签时,如果没有指定 Post ID 参数,该标签将返回循环中最后一篇文章的 URL,而不是当前页面的固定链接,或者直接不返回结果,所以一般需 ...

  9. 【转】unity自带寻路Navmesh入门教程(二)

    http://liweizhaolili.blog.163.com/blog/static/16230744201271210237616/ 上一节简单介绍了NavMesh寻路的基本用法,这次来介绍一 ...

  10. Nginx & Reverse Proxy

    Nginx & Reverse Proxy https://docs.nginx.com/nginx/admin-guide/web-server/reverse-proxy/ https:/ ...