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. C#隐藏(new)方法和重写(override)方法

    在基类调用的时候 隐藏方法还是调用基类的方法 而重写方法调用的就是子类的中的方法 同时,当子类中的方法与父类或者所实现的接口中的扩展方法冲突时,那么此时相当于一个隐藏方法 基类调用或者接口调用的时候使 ...

  2. angular指令

    转自:http://www.cnblogs.com/rohelm/p/4051437.html 对于指令,可以把它简单的理解成在特定DOM元素上运行的函数,指令可以扩展这个元素的功能. 首先来看个完整 ...

  3. Javaweb 第7天 Servlet课程

    Servlet课程 三日大纲 ● 网络概念,专业术语 ● Tomcat使用,发布网站,使用Myeclispe发布网站(搭建环境) ● 编写Servlet,Servlet生命周期 ● 用户注册,显示所有 ...

  4. Monkey总结

    Monkey是一个快速检查内存泄露的好工具,可以初步发现较明显的内存泄露问题. 什么是内存泄露?是指不在使用的对象持续占有内存,造成内存空间的浪费. 检查内存泄露的基本操作步骤: 1.运行Monkey ...

  5. UVa 536 Tree Recovery | GOJ 1077 Post-order (习题 6-3)

    传送门1: https://uva.onlinejudge.org/external/5/536.pdf 传送门2: http://acm.gdufe.edu.cn/Problem/read/id/1 ...

  6. 2016 JetBrains 开发者日遇见开发神器的创造者

    JetBrains团队首次落地中国北京!2016 JetBrains开发者日将于2016年11月26日星期六10:00-16:30在中国北京举办! 这一次,我们将与社区演讲者一起谈论现代软件开发语言. ...

  7. mog使用指南

    mog使用指南 mgo简介 mgo(音mango)是MongoDB的Go语言驱动,它用基于Go语法的简单API实现了丰富的特性,并经过良好测试. 官方网站:http://labix.org/mgo. ...

  8. Computation expressions and wrapper types

    原文地址:http://fsharpforfunandprofit.com/posts/computation-expressions-wrapper-types/ 在上一篇中,我们介绍了“maybe ...

  9. 1、SpringMVC+MyBaits实现查询所有

    1.创建如下所示项目 2.在src下的com.entity包下创建 Emp.java package com.entity; /** * * @author Holly老师 * */ public c ...

  10. jquey(判断文本框输入的网址链接是否符合规则)

    今天遇到一个问题,我要在文本框中输入一个网址链接,使其跳转.但是如何验证,我首先想到了正则表达式.对的,就是你想的那样,我对正则一知半解,但在我哥哥帮助下,最终是 实现 了效果.在此,来一发,分享一下 ...