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. python模块之collections模块

    计数器 Counter 计数元素迭代器 elements() 计数对象拷贝 copy() 计数对象清空 clear() from collections import Counter #import ...

  2. python之格式化

    python有两种方式可以格式化一种是用%s,一种使用format(2.6)进入的,从下面的代码可以看出,效果差不多. name = 'edward' age = 27 print("My ...

  3. 排列算法汇总(下一个排列,全排列,第K个排列)

    一.下一个排列 首先,STL提供了两个用来计算排列组合关系的算法,分别是next_permutation和prev_permutation. next_permutation(nums.begin() ...

  4. java多线程安全的问题

    多线程中一定会遇到线程安全的问题,也就是在同一时间N条线程操作了同一变量,这个变量也叫做共享变量. 举例:(错误的示范) 设计一个投票系统,多个人可以对同一个的票数进行投票,下面看具体代码: 代码: ...

  5. day 17 jQuery

    什么是jQuery? 可以把它认为是python中的模块,导入就可以使用模块中的功能. jQuery 的版本: 1.xx 系列 2.xx 系列 3.xx 系列 最常用的为1 系列,1系列最新版为1.1 ...

  6. bash shell命令与监测的那点事(三)

    bash shell命令与监测的那点事之df与du 前两篇介绍了bash shell的进程监控指令,但是有时候你需要知道在某个设备上还有多少磁盘空间.首先介绍df命令: df命令 df命令就是用来轻松 ...

  7. IOS开发学习笔记007-数据结构

    目录: 1.全局变量和局部变量 2.结构体 3.结构体数组 4.结构体做函数参数 5.结构体指针 6.枚举 7.总结 一.全局变量和局部变量 全局变量和局部变量的区别 1. 全局变量,再函数外定义的变 ...

  8. ogre3D学习基础14 -- 雾化效果与天空面,天空盒,天空穹

    前几天设置天空盒时一直出问题,现在问题终于解决了,问题来的莫名其妙,走的也莫名其妙. 第一,还是框架,我们依然使用ExampleApplication文件,框架如下 #include "Ex ...

  9. 如何使用 JSX 构建 Gutenberg 块

    本教程将介绍使用 JSX 构建自定义块所需的步骤. 由于浏览器不支持 JSX 和 ES6,因此我们需要将代码编译后才能在浏览器中运行. 我们不需要手动编译代码,因为有些工具可以为我们自动执行此过程. ...

  10. dib build ipa image Injection password

    针对dib制作的deploy image,注入密码有两种方式: devuser/dynamic-login .对应 dib 添加密码,是通过 dynamic-login element 来完成的. 首 ...