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. 用rekit创建react项目

    第一步  先进入github.com 然后搜索rekit 往下滑 1 . 先全局安装 npm install -g rekit 2 . 进入自己想要创建项目文件的目录输入 rekit create / ...

  2. ggplot2 梯度作图

    ggplot2是R语言的绘图包 library('ggplot2') df <- data.frame(var=c("a","b","c&quo ...

  3. 阿里云ECS装LAMP环境

    学生计划9.9买个一个ECS,要做PHP开发,所以搭建一个Lamp的环境 1.使用镜像,附件 sh-1.5.5附于文后. 2.一键安装 2.1 输入命令:chmod –R 777 sh-1.5.5 c ...

  4. c++沉思录 学习笔记 第五章 代理类

    Vehicle 一个车辆的虚基类 class Vehicle {public: virtual double weight()const = 0; virtual void start() = 0; ...

  5. windows 性能监视器常用计数器

    转载地址:https://www.jianshu.com/p/f4406c29542a?utm_campaign=maleskine&utm_content=note&utm_medi ...

  6. lamp环境搭建(apache安装,mysql安装,php安装)

    1.卸载系统内置的LAMP环境 1)卸载httpd服务(内置Apache) ① 使用rpm指令查询安装的httpd服务 ② 卸载httpd服务 如果出现以上提示,代表系统默认不允许我们卸载软件,使用强 ...

  7. Mysql知识点个人整理

    1.概念 数据库:保存有组织的数据的容器. 表: 某种特定类型数据的结构化清单 模式:关于数据库和表的布局和特性的信息?(有时指数据库) 主键: primary key 一个列或一组列,其值能唯一区分 ...

  8. Jmeter利用CSV Data Set Config 和 _CSVRead函数实现参数化

    测试接口时,当请求参数不是固定的,每次请求对应的参数都是不同的,就需要对请求参数进行参数化.我们这里简单介绍一下5个用户与一个用户建立好友关系. 一.测试需求描述 1. 本次测试的接口为http服务端 ...

  9. IT资产管理—采购与合同管理功能

  10. Rabbit mq 简单应用

    参考:http://rabbitmq.mr-ping.com/AMQP/AMQP_0-9-1_Model_Explained.html 简答模式(exchange不工作) import pika # ...