scroll
获取宽高
scrollWidth
只读
Element.scrollWidth 这个只读属性是元素内容宽度的一种度量，包括由于overflow溢出而在屏幕上不可见的内容。
scrollWidth的值等于内容的width + padding（包含伪元素，不包含滚动条）
注意是内容的宽度，包括溢出的内容，无论是否隐藏溢出的内容.（scrollHeight同理）
scrollHeight
只读
Element.scrollHeight 这个只读属性是一个元素内容高度的度量，包括由于溢出导致的视图中不可见内容。
scrollHeight的值等于内容的height + padding（不包含滚动条）
获取位置
scrollTop
读 / 写
Element.scrollTop 属性可以获取或设置一个元素的内容垂直滚动的像素数.
- 一个元素的
scrollTop值是这个元素的内容顶部（卷起来的）到它的视口可见内容（的顶部）的距离的度量。 - 当一个元素的内容没有产生垂直方向的滚动条，那么它的
scrollTop值为0.
简单理解：向下滚动多少
例：
//检测页面滚动的头部距离(被卷去的头部)
document.documentElement.scrollTop
scrollLeft
读 / 写
Element.scrollLeft 属性可以读取或设置元素滚动条到元素左边的距离。
offset
获取宽高
offsetWidth / offsetHeight
只读
offsetWidth是测量包含元素的边框(border)、内边距(padding)、滚动条(scrollbar)（如果存在的话）、以及CSS设置的宽度(width)的值，不包含伪元素.
它等于元素实际展现的宽度 / 高度
例：
<!-- css -->
<style>
.box {
width: 100px;
height: 100px;
padding: 10px;
border: 1px solid #333;
}
</style>
<!-- html -->
<div class="box"></div>
<!-- js -->
<script>
let box = document.querySelector('.box')
console.log(box.offsetWidth) // 122 = width + padding + border
console.log(box.offsetHeight) // 122 = height + padding + border
</script>
获取位置
offsetTop / offsetLeft
只读
获取元素距离自己定位父级元素的上 / 左距离
如果都没有则以文档左上角为准
client
获取宽高
clientWidth / clientHeight
只读
获取元素的可见部分宽高(不包含边框，滚动条等)
获取位置
clientTop / clientLeft
只读
获取上边框border和左边框border宽度