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 

    }

  • 相关阅读:
    Xcode9自带版本控制系统(Git)的使用
    iOS中的枚举:enum, NS_ENUM, NS_OPTIONS的使用区别
    iOS页面右滑返回的实现方法总结
    [C++]项目中的代码注释规范(整理)
    Dynamic Time Warping 动态时间规整算法
    动态时间归整/规整/弯曲(Dynamic time warping,DTW)
    隐马尔科夫模型HMM学习最佳范例
    蓝牙4.0协议基本介绍以及展望
    UART的CTS与RTS
    KEIL MDK输出map文件分析
  • 原文地址:https://www.cnblogs.com/susanws/p/5508110.html
Copyright © 2011-2022 走看看