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. ajax请求相关方法

    jquery的ajax请求相关方法有多个: 1.$.ajax() 示例: <!DOCTYPE html> <html> <head> <meta charse ...

  2. Mac下配置Maven环境变量

    Mac下配置Maven环境变量 1.先到Apache官网下载maven压缩包.下载地址:http://maven.apache.org/download.cgi 2.Maven是用Java开发的,所以 ...

  3. IOC(控制反转)

    一.容器与Bean 在Spring中,那些组成你应用程序的主体(backbone)及由Spring IoC容器所管理的对象,被称之为bean. 简单地讲,bean就是由Spring容器初始化.装配及管 ...

  4. 如何在Sublime Text中添加代码片段

    我们在编写代码的时候,总会遇到一些需要反复使用的代码片段.这时候就需要反复的复制和黏贴,大大影响效率.我们利用Sublime Text的snippet(代码片段)功能,就能很好的解决这一问题.通俗的讲 ...

  5. 淘淘商城_day10_课堂笔记

    今日大纲 Dubbo入门学习 使用dubbo优化单点登录系统 系统间服务调用方式 浏览器直接访问 浏览器发起请求,通过ajax或jsonp方式请求: Httpclient方式 系统与系统之间通过Htt ...

  6. 第九十九节,JavaScript数据类型

    JavaScript数据类型 学习要点: 1.typeof操作符 2.Undefined类型 3.Null类型 4.Boolean类型 5.Number类型 6.String类型 7.Object类型 ...

  7. 第六十二节,html分组元素

    html分组元素 学习要点:     1.分组元素总汇     2.分组元素解析     本章主要探讨HTML5中分组元素的用法.所谓分组,就是用来组织相关内容的HTML5元素,清晰有效的进行归类. ...

  8. CF #368 div2

    题目链接:http://codeforces.com/contest/707/problem/A A. Brain's Photos time limit per test 2 seconds mem ...

  9. Delphi用ADOquery主从表例子(转)

    http://blog.csdn.net/kandy_zheng/article/details/1639184 在sql server 的northwide 中建立主表 create table s ...

  10. Matlab - 矩阵元素引用

    >> A = [ ; ; ] A = 1. 选择第m行n列的元素 >> A(,) ans = 2. 选择第i列所有元素 >> A(:,) ans = 3. 选择第j ...