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中的传值

    关于java中到底是传值还是传应用,有以下笔记: Java 编程语言只有值传递参数.当一个对象实例作为一个参数被传递到方法中时,参数的值就是该对象的引用一个副本.指向同一个对象,对象的内容可以在被调用 ...

  2. 开机自动挂载 VHD 的方法

    一.批处理 除了将 VHD 文件用人工方式在[磁盘管理]里[附加]来挂载以外,也能用[脚本]来实现自动挂载. 打开[启动],将写好的 mount.bat 放入即可: Mount.bat 文件的内容为: ...

  3. Ubuntu下NFS,TFTP服务搭建

    环境:Ubuntu 一. 搭建NFS服务器 (1)安装: sudo apt-get install nfs-kernel-server   #安装NFS服务器端 sudo apt-get instal ...

  4. [妙味JS基础]第四课:JS数据类型、类型转换

    知识点总结 JS数据类型:number数字(NaN).string字符串.boolean布尔值.函数类型.object对象(obj.[].{}.null).undefined未定义 typeof 用来 ...

  5. linux文件系统拓展属性

    在研究GlusterFS中,发现GlusterFS使用了文件系统的Extended Attributes,中文可以称之为文件系统扩展属性.由于资料比较少,中文资料更少,因此把记录几点Extended ...

  6. 7.hibernat实现双向一对多(多对一)

    1.创建如下项目结构 2.在项目的src下创建hibernate.cfg.xml主配置文件 <?xml version="1.0" encoding="UTF-8& ...

  7. IIS7部署MVC站点后,打开无法正常跳转到首页

    产品拿到安装包后想在本地安装测试一下,但是管理工具里没有IIS. 后来在windows功能里添加iis服务. 添加后成功安装. 但是第一次打开时,页面提示要“启用目录浏览”. 启用后,打开的却是站点目 ...

  8. digitalocean教程:你应该知道的10件事

    DigitalOcean VPS性价比高,全球拥有多处机房,无须备案,非常适合守规矩的中国用户使用.digitalocean优惠码.digitalocean速度.digitalocean评测是网友关心 ...

  9. Gentoo/Funtoo USE标记介绍

    Gentoo/Funtoo USE标记 USE的简单理解如下:一个软件不只包含软件本身,还包括其组件,如,文档,插件,GUI支持等.USE就是用来标记是否要安装软件的同时安装这些组件. 声明USE标记 ...

  10. java 内部类(摘抄自网络)

    Java内部类 1.内部类分为成员内部类.静态嵌套类.方法内部类.匿名内部类. 几种内部类的共性: A.内部类仍然是一个独立的类,在编译之后会内部类会被编译成独立的.class文件,但是前面冠以外部类 ...