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 

    }

  • 相关阅读:
    Java中使用Base64编码URL
    JSON Web Token (JWT)入门学习
    1047. 删除字符串中的所有相邻重复项
    1021. 删除最外层的括号
    使用shell获取随机端口<帮你解决端口的占用烦恼>
    初始化一个vue项目并生成完整的目录结构
    mysql-常用字符函数
    设计模式-单例模式-饿汉和懒汉
    Java-指令的重排序
    Java-反射类加载到内存分析
  • 原文地址:https://www.cnblogs.com/susanws/p/5508110.html
Copyright © 2011-2022 走看看