[JavaScript]BOM-1

最新推荐文章于 2020-05-10 15:05:50 发布

akueq

最新推荐文章于 2020-05-10 15:05:50 发布

阅读量347

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/fqq_5280/article/details/81585065

JavaScript 专栏收录该内容

21 篇文章

订阅专栏

本文介绍了网页中滚动距离、视口尺寸、元素几何尺寸、位置等的获取方法及其兼容性解决方案。通过封装函数getScrollOffset()和getViewportOffset()实现了浏览器间的统一处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

确定滚动距离

window.pageXOffset/pageYOffset (IE8及IE8以下不兼容)
document.body/doucumentElement.scrollLeft/scrolTop 兼容性比较混乱
- 用的时候取两个值相加（支持的方法值为正确值，不支持的方法值为0）
封装兼容性方法，求滚动轮滚动离getScrollOffset()

function getScrollOffset() {

    if(window.pageXOffset) {
        return {
            x : window.pageXOffset,
            y : window.pageYOffset
        }
    }else{
        return {
            x : document.body.scrollLeft + document.documentElement.scrollLeft,
            y : document.body.scrollTop + document.documentElement.scrollTop
        }
    }
}

查看视口的尺寸

window.innerWidth/innerHeight (IE8及IE8以下不兼容)
document.documentElement.clientWidth/clientHeight 标准模式下，任意浏览器都兼容
document.body.clientWidth/clientHeight 适用于==怪异模式==下的浏览器
封装兼容性方法，返回浏览器视口尺寸getViewportOffset()

  function getViewportOffset() {
    if(window.innerWidth) {
      return {
        w : window.innerWidth,
        h : window.innerHeight
      }
    }else{
      if(document.compatMode === "BackCompat") {
        //怪异模式，混杂模式
        return {
          w : document.body.clientWidth,
          h : document.body.clientHeight
        }
      }else{
        //标准模式
        return {
          w : document.documentElement.clientWidth,
          h : document.documentElement.clientHeight
        }
      }
    }
  }

标准模式or怪异模式

<!DOCTYPE html> 这段代码的作用，进入标准模式（简单来说）

怪异模式（浏览器的渲染模式不同）（也叫混杂模式）：试图兼容之前的语法（识别过时的语法）

使用document.compatMode属性代表兼容性，这个属性可以判断是否时标准模式。

查看元素的几何尺寸

domEle.getBoundingClientRect(); （求出的是视觉上的尺寸）
兼容性很好
该方法返回一个对象，对象里面有left,top,right,bottom等属性。left和top代表该元素左上角的X和Y坐标，right和bottom代表元素右下角的X和Y坐标
height和width属性，老版本IE未实现
返回的结果不是“实时的”