scroll

获取宽高

scrollWidth

只读

Element.scrollWidth 这个只读属性是元素内容宽度的一种度量，包括由于overflow溢出而在屏幕上不可见的内容。

scrollWidth的值等于内容的width + padding（包含伪元素，不包含滚动条）

注意是内容的宽度，包括溢出的内容，无论是否隐藏溢出的内容.（scrollHeight同理）

Element.scrollWidth – Web API 接口参考 | MDN

scrollHeight

只读

Element.scrollHeight 这个只读属性是一个元素内容高度的度量，包括由于溢出导致的视图中不可见内容。

scrollHeight的值等于内容的height + padding（不包含滚动条）

Element.scrollHeight – Web API 接口参考 | MDN

获取位置

scrollTop

读 / 写

Element.scrollTop 属性可以获取或设置一个元素的内容垂直滚动的像素数.

• 一个元素的 scrollTop 值是这个元素的内容顶部（卷起来的）到它的视口可见内容（的顶部）的距离的度量。
• 当一个元素的内容没有产生垂直方向的滚动条，那么它的 scrollTop 值为0.

简单理解：向下滚动多少

例：

//检测页面滚动的头部距离(被卷去的头部)
document.documentElement.scrollTop

Element.scrollTop – Web API 接口参考 | MDN

scrollLeft

读 / 写

Element.scrollLeft 属性可以读取或设置元素滚动条到元素左边的距离。

Element.scrollLeft – Web API 接口参考 | MDN

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>

HTMLElement.offsetWidth – Web API 接口参考 | MDN

HTMLElement.offsetHeight – Web API 接口参考 | MDN

获取位置

offsetTop / offsetLeft

只读

获取元素距离自己定位父级元素的上 / 左距离

如果都没有则以文档左上角为准

拓展阅读：HTMLElement.offsetParent – Web API 接口参考 | MDN

client

获取宽高

clientWidth / clientHeight

只读

获取元素的可见部分宽高(不包含边框，滚动条等)

Element.clientWidth – Web API 接口参考 | MDN

获取位置

clientTop / clientLeft

只读

获取上边框border和左边框border宽度