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. struts2.3 创建工程

    1:在该网站下载struts2.3.16.3,目前为最新版.http://www.struts.apache.org/download.cgi 不妨下载“Full Distribution”版本 下载 ...

  2. Maven 复制jar到指定目录

    在完成模块开发后,需要发布jar到nexus上,与此同时,则要部署开发的模块,需要将编译打包的jar复制到指定的路径,再进行部署,而不是手动的去复制那些jar,因为当模块多的话,则会感到特别的烦,所以 ...

  3. CSS中RGBA的兼容方法以及透明度计算方法

    CSS对IE使用背景透明 实现 rgba 效果 height:35px; background: -webkit-gradient(linear,left top,left bottom,from(r ...

  4. SQL learning

    一.创建和删除数据库 1.创建用户 //创建用户且置密码,在MySQL中行,但在Oracle中行  ----必须在超级管理员身份下操作 create user hncu identified by ' ...

  5. 两种为wangEditor添加拖拽调整高度的方式:CSS3和jQuery UI

    wangEditor是一款优秀的Web富文本编辑器,但如果能像KindEditor那样支持拖拽调整高度就更好了.有两种方式可以为wangEditor添加这一功能,这里使用的wangEditor版本为2 ...

  6. 关于对象存入NSUserDefaults

    #import <Foundation/Foundation.h> @interface Student : NSObject <NSCoding> @property (no ...

  7. jQuery复习:第五章

    一.表单应用 1.表单验证: 首先创建一个表单: <form method="post" action=""> <div class=&quo ...

  8. javascript动画:velocity.js学习

    第二章:基础知识 一.velocity和jQuery: Velocity函数是独立于jQuery的,但两者可以结合使用.通常这么做的好处是可以利用jQuery的链式操作:当你先用jQuery选择了一个 ...

  9. 关于IOS的Cocoapods相关问题

    Cocoa Pods确实是一个方便的工具,特别是在敏捷开发多个项目的时候,一个工具重复使用,大量节约时间: 可以及时更新github上面的开源库代码,只要改动Podfile文件中对应的开源库的版本号即 ...

  10. javascript基础(五)函数

    原文http://pij.robinqu.me/ 通过call和apply间接调用函数(改变this) call 和 apply带有多个参数,call和apply把当前函数的this指向第一个参数给定 ...