⭐️ 概览

• offsetParent —— 返回一个指向最近的（指包含层级上的最近）包含该元素的定位元素或者最近的 table, td, th, body 元素。
• offsetLeft/offsetTop —— 是相对于 offsetParent 的左上角边缘的坐标。
• offsetWidth/offsetHeight —— 元素的“外部” width/height，边框（border）尺寸计算在内。
• clientLeft/clientTop —— 从元素左上角外角到左上角内角的距离。对于从左到右显示内容的操作系统来说，它们始终是左侧/顶部 border 的宽度。而对于从右到左显示内容的操作系统来说，垂直滚动条在左边，所以 clientLeft 也包括滚动条的宽度。
• clientWidth/clientHeight —— 内容的 width/height，包括 padding，但不包括滚动条（scrollbar）。
• scrollWidth/scrollHeight —— 内容的 width/height，就像 clientWidth/clientHeight 一样，但还包括元素的滚动出的不可见的部分。
• scrollLeft/scrollTop —— 从元素的左上角开始，滚动出元素的上半部分的 width/height。

滚动条偏移距离

常规

• window.pageXOffset/window.pageYOffset
• IE9/IE8及以下支持，不支持
  • document.body.scrollLeft/scrollTop
  • document.documentElement.scrollLeft/scrollTop

不常见

• window.scrollX/scrollY

兼容图

⭐️ 封装滚动条偏移距离

function getScrollOffset() {
	if (window.pageXOffset) {
  	return {
      left: window.pageXOffset,
    	top: window.pageYOffset
    }
  } else {
  	return {
    	left: document.body.scrollLeft + document.documentElement.scrollLeft,
      top: document.body.scrollTop + document.documentElement.scrollTop
    }
  }
}

浏览器的标准模式与怪异模式

• 默认向后兼容