client、offset和scroll的区别和用法

今天在项目中需要获取一个弹出框的实际内容高度，这个没什么问题，用scrollHeight，但是我想到了有两个类似的宽高属性client和scroll，由于用得少，似乎有点淡忘了，在此总结如下：

1、client
client系列有4个属性：

clientWidth：
元素没被设置宽度，clientWidth = 元素实际宽度 + padding左右内间距
元素被设置宽度，clientWidth = 元素被设置的宽度 + padding左右内间距

clientHeight：
同上，宽度改为高度，padding左右间距改为上下间距

clientLeft / clientTop：
左 / 上边框的宽度

2、offset
offset系列也有4个属性：

offsetWidth：
元素没被设置宽度，clientWidth = 元素实际宽度 + padding左右内间距 + 边框左右宽度
元素被设置宽度，clientWidth = 元素被设置的宽度 + padding左右内间距 + 边框左右宽度

offsetHeight：
同上，宽度改为高度，padding左右间距改为上下间距

3、scroll
scroll同样4个属性：

scrollWidth / scrollHeight：
如果内容没溢出，没出现滚动条，则同clientWidth / clientHeight，
如果有溢出，出现了滚动条，则等于实际溢出宽度 / 高度 + 左 / 上填充

scrollTop / scrollLeft：
拖动滚动条时，被卷进去内容的高度 / 宽度

综上比较，区别很明显：
1、client系列不获取边框数值，offset会获取边框的数值；
2、以上两者获取到的数值都受元素被设置的宽高具体数值影响，如果在出现滚动条的情况下想获取元素内所有内容的实际高度，则使用scrollHeight；
3、scrollTop不仅可以获取元素被卷进去的高度，还可以手动设置其数值（如：dom.scrollTop = 200），使页面滚动到指定位置；
4、但滚动到指定位置最常用的方法是dom.scrollTo(x轴坐标, y轴坐标)，如：window.scrollTo(0, 300)