不知道你有没有跟我一样的感受，虽然从事前端开发很多年了，但对于js里的scrollTop、scrollY、clientWidth之类的属性一直傻傻分不清楚，所以这篇文章就准备好好聊聊这些容易混淆的属性
这些属性大体分为三类：
- scroll
- client
- offset
接下来就会围绕这三类属性展开讲解，走你~
offset系列
从它的名称中我们就可以知道它是一个关于偏移的属性，这个系列下有4个属性,下面分别介绍下它们
- offsetWidth: 表示元素在水平方向上占用的空间大小，无单位(以像素px计),计算公式为：offsetWidth = border-left-width + padding-left + width + padding-right + border-right-width，也就是说该属性的值包含内容+填充+边框三部分组成
- offsetHeight: 表示元素在垂直方向上占用的空间大小，无单位(以像素px计),计算公式为：offsetHeight = border-top-width + padding-top + height + padding-bottom + border-bottom-width，也就是说该属性的值包含内容+填充+边框三部分组成
- offsetTop：表示元素的上外边框至offsetParent元素的上内边框之间的像素距离
- offsetLeft: 表示元素的左外边框至offsetParent元素的左内边框之间的像素距离
在上面的介绍中，出现了多次offsetParent元素，简单来说，它就是 与当前元素最近的经过定位(position不等于static)的父级元素，如果没有找到，则会选定为body。如果一个元素定位为fixed或者元素是body，那么其offsetParent为null，需要注意的是fixed元素offsetTop = top，offestLeft = left
client系列
这个系列包含如下四个属性，下面依次讲解
- clientHeight: 返回元素节点的客户区高度,公式为：clientHeight = padding-top + height + padding-bottom，不包含页面不可见部分
- clientWidth: 返回元素节点的客户区宽度,公式为：clientWidth = padding-left + width + padding-right，不包含页面不可见部分
- clientLeft: 返回左边框的宽度
- clientTop: 返回上边框的宽度
需要注意的是如果一个元素 display:none，那么上述属性的值都为0
scroll系列
这个系列包含如下6个属性，下面依次讲解
- scrollHeight：表示元素的总高度，包括由于溢出而无法展示在网页的不可见部分
- scrollWidth：表示元素的总宽度，包括由于溢出而无法展示在网页的不可见部分
- scrollTop：表示被隐藏在内容区域上方的高度，与scrollY返回值一样
- scrollLeft：表示被隐藏在内容区域左侧的的宽度，与scrollX返回值一样
- window.scrollX: 返回文档/页面水平方向滚动的像素值，需要注意这个是属性是window对象独享的，并且window.pageXOffset是它的别名
- window.scrollY: 返回文档/页面垂直方向滚动的像素值，需要注意这个是属性是window对象独享的，并且window.pageYOffset是它的别名
一般通过如下写法来获取页面滚动的高度
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
常用方法
在介绍完了上述一些比较容易混淆的概念后，这里在列举一些相关实用的api，会帮助我们在未来的开发中提效
- scrollTo(x,y)：滚动当前文档，让文档中由坐标x和y指定的点位于视口的左上角，这个功能方便快速定位页面的内容
- getboundingclientrect：返回的结果是包含完整元素的最小矩形，并且拥有left, top, right, bottom, x, y, width, 和 height这几个以像素为单位的只读属性用于描述整个边框。除了width 和 height 以外的属性是相对于视图窗口的左上角来计算的,可以使用它来实现元素的 懒加载 功能
结语
这些知识虽然基础，但对于我们平时的开发非常重要，熟练掌握它们能帮助我们大大提高开发的质量与效率，因此打好这些地基是非常重要的，所谓 万丈高楼平地起 也就是这个意思~
