dom 一些兼容性方法

最新推荐文章于 2023-05-19 18:38:43 发布

CarolineL

最新推荐文章于 2023-05-19 18:38:43 发布

阅读量346

点赞数

分类专栏： dom 文章标签：查看视口尺寸查看滚动条位置兼容

本文链接：https://blog.csdn.net/Lxj1107020234/article/details/88832213

版权

dom 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1、查看滚动条的滚动距离

/**
 * 查看滚动条位置:
 *  1) window.pageXOffset | pageYOffset (IE8以下不支持)
 *  2) document.body.scrollLeft | scrollTop 
 *     document.documentElement.scrollLeft | scrollTop
 */

function getScrollPosition() {
  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
    }
  }
}

2、查看视口尺寸

/**
 * 查看视口的尺寸:
 *  1) window.innerWidth | innerHeight (IE8和IE8以下不支持)
 *  2) document.body.clientWidth | clientHeight (怪异模式)
 *     document.documentElement.clientWidth | clientHeight  (标准模式)
 */

function getViewportSize() {
  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
      }
    }
  }
}