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

3

document.documentElement.scrollTop

在未声明的情况下始终为

0

,所以可

以用来判断是否声明了

DTD;

所以,

 

判断滚动条

是否已拉到页面最底部,可以用如下代码

window.onscroll = function (){

var marginBot = 0;

if (document.documentElement.scrollTop){

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

}

}

js获取不同浏览器盒子宽度高度的更多相关文章

  1. JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)_javascript技巧_

    JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)_javascript技巧_--HTML5中文学习网 http://www.html5cn.com.cn/shili/javascripts/79 ...

  2. Js获取字符串的显示宽度/高度

    重点:1.在H5页面,文字大小单位为rem2.不同的font-family,文字的宽度不一样3.文字宽度同时受font-size和font-family影响 思路:在页面动态创建一个节点,设置节点的f ...

  3. JS获取当前浏览器的类型

    <script type=“text/javascript”> function isIE(){return navigator.appName.indexOf(“Microsoft In ...

  4. js 获取浏览器/网页宽度高度整理

    网页宽度.高度: 网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: document.bo ...

  5. JS获取图片的原始宽度和高度

    页面中的img元素,想要获取它的原始尺寸,以宽度为例,可能首先想到的是元素的innerWidth属性,或者jQuery中的width()方法.如下: <img id="img" ...

  6. JS获取各种浏览器窗口大小的方法

    常用:JS 获取浏览器窗口大小复制代码 代码如下:// 获取窗口宽度if (window.innerWidth)winWidth = window.innerWidth;else if ((docum ...

  7. jq 获取各个元素的宽度高度的方法

    JS获取各种宽度.高度的简单介绍: scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获 ...

  8. js获取网页屏幕可视区域高度

    document.body.clientWidth ==> BODY对象宽度document.body.clientHeight ==> BODY对象高度document.document ...

  9. js获取网页屏幕可见区域高度

    document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.docume ...

随机推荐

  1. java 生成证书用于https

    在jdk的bin目录下运行: keytool -genkeypair -alias "tomcat" -keyalg "RSA" -keystore " ...

  2. LOOPS

    LOOPS 题目链接:http://acm.split.hdu.edu.cn/showproblem.php?pid=3853 递推 设dp[i][j]为(i,j)到终点期望的使用魔力值,mp[i][ ...

  3. Java Lambda表达式入门[转]

    原文链接: Start Using Java Lambda Expressions http://blog.csdn.net/renfufei/article/details/24600507 下载示 ...

  4. ggplot2 scale相关设置-坐标转换

    ggplot2 scale相关设置-坐标转换 在R中坐标轴转换有多种形式,包括对数转换,平方根转换以及坐标刻度前后进行调换 用到的函数分别有: scale_x_log10(...) scale_y_l ...

  5. POJ 1845 Sumdiv#质因数分解+二分

    题目链接:http://poj.org/problem?id=1845 关于质因数分解,模板见:http://www.cnblogs.com/atmacmer/p/5285810.html 二分法思想 ...

  6. AnimatorController动画融合树

    通过Unity动画状态机,能帮我们轻松处理转换各个动画片断,达到想要的效果,但是如果仅仅是一个个动画的硬生生的切换,那么看起来就非常突然,而不真实了,在质量要求比较高的游戏中,特别是动作游戏,我们就不 ...

  7. agnentX学习存在疑问?

    在RFC2741中这样定义: 4.3中有如下段落: A general architectural division of labor between master agent and  subage ...

  8. OpenGL4.x不支持gluPerspective函数。故备份之

    template <typename type> inline mat4<type> mat4<type>::perspectiveProjection(type ...

  9. Trouble Shooting

    情况是这样的,我在写一个类似于Online-Judge的系统,用python很容易实现,编译源程序,运行程序,最后比较程序输出与标准输出得出成绩.现在有个问题,万一程序运行时崩溃,比如出现除0异常,a ...

  10. Linux(power服务器)中kettle(2)

    Hadoop集群硬件环境 4台机器 ip地址 172.16.1.131 172.16.1.132 172.16.1.133 172.16.1.134 每台内存16G 8核cpu 直接使用报错: