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

各种height 以及判断滚动条是否已拉到页面最底部的更多相关文章

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

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

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

    DTD已声明 IE document.documentElement.scrollHeight 浏览器所有内容高度 ,document.body.scrollHeight 浏览器所有内容高度 docu ...

  3. js判断滚动条是否已到页面最底部或顶部实例

    原文 本文实例讲述了js判断滚动条是否已到页面最底部或顶部的方法.分享给大家供大家参考.具体分析如下: 我们经常会看到很多的网站一个返回顶部效果就是当我们滚动条到指定位置时返回顶部出来了,否则就自动隐 ...

  4. jquery如何判断滚动条滚到页面底部并执行事件

    首先理解三个dom元素,分别是:clientHeight.offsetHeight.scrollTop. clientHeight:这个元素的高度,占用整个空间的高度,所以,如果一个div有滚动条,那 ...

  5. JS实现判断滚动条滚到页面底部并执行事件的方法

    需要了解三个dom元素,分别是:clientHeight.offsetHeight.scrollTop. clientHeight:这个元素的高度,占用整个空间的高度,所以,如果一个div有滚动条,那 ...

  6. js判断滚动条到底部

    判断滚动条到底部,需要用到DOM的三个属性值,即scrollTop.clientHeight.scrollHeight. scrollTop为滚动条在Y轴上的滚动距离. clientHeight为内容 ...

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

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

  8. Jquery判断滚动条是否到达窗口顶部和底部

    <script type="text/javascript"> $(document).ready(function(){     alert($(window).he ...

  9. 判断滚动条到底部的JS代码

    这篇文章介绍了判断滚动条到底部的JS代码,有需要的朋友可以参考一下 判断滚动条到底部,需要用到DOM的三个属性值,即scrollTop.clientHeight.scrollHeight. scrol ...

随机推荐

  1. HDU6030 Happy Necklace(递推+矩阵快速幂)

    传送门:点我 Little Q wants to buy a necklace for his girlfriend. Necklaces are single strings composed of ...

  2. SpriteKit 关于categoryBitMask collisionBitMask contactTestBitMask 遇到的一些问题

    手写copy一下官方解释 首先是categoryBitMask /** 定义了这个物理刚体是属于哪个类别的掩码 .在一个场景中的每个物理刚体可以分配给达到 32 不同的类别(参数 int bitmas ...

  3. git 使用遇到的问题

    本博客只记录遇到的问题和解决方案 问题一:git上与本地不同步无法上传 先git pull origin master再git push -u origin master(实在不行或者清空本地,或者清 ...

  4. centos 搭建git 服务器

    安装 git yum -y install git 添加git 用户 adduser git 切换到git 用户 su git 在git用户家目录下创建  .ssh文件夹 mkdir .ssh 修改文 ...

  5. jfinal处理完html提交过来的数据,将处理信息返回给html页面。html根据返回值进行相应的处理

    1.前台jQuery代码: $.ajax({ url: "/admin/jcsjpz/syxmdy/RemoveSyxm", data: {data: id}, success: ...

  6. django.core.exceptions.ImproperlyConfigured: Requested setting DEFAULT_INDEX_TABLESPACE, but settings are not configured. You must either define the environment variable DJANGO_SETTINGS_MODULE or call

    Error info: django.core.exceptions.ImproperlyConfigured: Requested setting DEFAULT_INDEX_TABLESPACE, ...

  7. php之$_SESSION的理解

    1.什么是session?       Session的中文译名叫做“会话”,其本来的含义是指有始有终的一系列动作/消息,比如打电话时从拿起电话拨号到挂断电话这中间的一系列过程可以称之为一个sessi ...

  8. VS中程序包错误,引用错误该如何解决

    1.找到包的文件.packages.config 对应于: 2.删除掉 packages.config 报错的项.然后再重新添加一次.就没有解决的不了的问题. 是不是很爽.....

  9. leetcode3:无重复字符的最长子串

    给定一个字符串,找出不含有重复字符的最长子串的长度. 示例: 给定 "abcabcbb" ,没有重复字符的最长子串是 "abc" ,那么长度就是3. 给定 &q ...

  10. Android 常用RGB值以及中英文名称

    Android 常用RGB值以及中英文名称   Android   常用 RGB值以及中英文名称     颜   色     RGB 值 英文名 中文名     #FFB6C1 LightPink 浅 ...