常用易混淆的获取页面距离高度的方法

offsetWidth、offsetHeight

元素在水平、垂直方向上占用的空间大小：

offsetWidth = border-left + padding-left + width + padding-right + border-right
offsetHeight = border-top + padding-top + height + padding-bottom + border-bottom
注：如果存在垂直滚动条，offsetWidth 也包括垂直滚动条的宽度；如果存在水平滚动条，offsetHeight 也包括水平滚动条的高度
复制代码

offsetTop、offsetLeft

元素的外边框至 offsetParent 元素的内边框之间的像素距离；

获取元素距离页面顶部距离
function getElementToPageTop(el) {
  if(el.parentElement) {
    return this.getElementToPageTop(el.parentElement) + el.offsetTop
  }
  return el.offsetTop
}
复制代码

offsetX、 offsetY

鼠标相对于事件源的位置

clientWidth、clientHeight

文档可见区域大小

 clientWidth = document.documentElement.clientWidth||document.body.clientWidth,
 clientHeight = document.documentElement.clientHeight||document.body.clientHeight ;
复制代码

clientX、clientY

鼠标相对文档可见区域的位置

scrollHeight、scrollWidth

文档可滚动区域的宽高，可用于表示整个页面的宽高

1、所有偏移量属性都是只读的；
2、在使用的时候可能出现 DOM 没有初始化，就读取了该属性，这个时候会返回 0；对于这个问题我们需要等到 DOM 元素初始化完成后再执行
复制代码

scrollLeft、scrollTop

页面滚动的距离

转载于:https://juejin.im/post/5cff17d6f265da1bd1464dea