zoukankan      html  css  js  c++  java
  • js获取不同浏览器盒子宽度高度

     

     

    DTD

    已声明

     

     

    IE 

    document.documentElement.scrollHeight  

    浏览器所有内容高

     ,document.body.scrollHeight  

    浏览器所有内容高度

     

    document.documentElement.scrollTop  

    浏览器滚动部分高度,

    document.body.scrollTop 

    始终为

    document.documentElement.clientHeight  

    浏览器可视部分高度,

    document.body.clientHeight  

    浏览器所有内容高度

     

    FF 

    document.documentElement.scrollHeight  

    浏览器所有内容高

     ,document.body.scrollHeight  

    浏览器所有内容高度

     

    document.documentElement.scrollTop  

    浏览器滚动部分高度,

    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  

    浏览器所有内容高度

     

    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 

    }

  • 相关阅读:
    对JavaScript调用堆栈和setTimeout用法的深入研究
    Js中的window.parent ,window.top,window.self 代表的对象
    lhgselect 联动选择下拉菜单 v1.0.0 (20110613)
    lhgcore JavaScript Library v1.4.5 API (20110622)
    表单元素完美垂直居中
    判断 iframe 是否加载完成的完美方法
    lhgdialog 弹出窗口插件 v3.5.2 ( 20110704 )
    JS的事件冒泡和事件捕获
    程序设计原则
    python中入口函数的用法
  • 原文地址:https://www.cnblogs.com/susanws/p/5508110.html
Copyright © 2011-2022 走看看