【记录】innerHeight？clientHeight？offsetHeight？scrollTop？screenTop？.....一堆高度傻傻分不清

1、window.screen

window.screen.height

• 用户屏幕的高度。

window.screen.availHeight

• 浏览器窗口在屏幕上可占用的垂直空间，即最大高度。

---

不会随浏览器窗口变化，只与用户屏幕尺寸有关。

2、window

window.innerHeight

• 浏览器窗口的视口的高度（包括滚动条）。
• 只读。

window.outerHeight

• 整个浏览器窗口的高度（包括地址栏啥的55667788）。
• 只读。

---

随着浏览器窗口变化。
不支持IE9及以下。

3、element

element.clientHeight

• 对于没有定义CSS的元素或者内联元素，为0；否则为元素可见高度（注意是可见高度，如果元素没有滚动条，则等于padding+content；如果元素有滚动条，则等于height）。
• 只读。

element.clientTop

• 元素顶部边框（border-top）的高度。
• 只读。

element.offsetHeight

• 元素加了border的可见高度（如果元素没有滚动条，则等于border+padding+content；如果元素有滚动条，则等于border+height）。
• 只读。

element.offsetTop

• 当前元素相对于其 offsetParent 元素（最近的开启定位的祖先元素，无则为根元素）的顶部内边距的距离。
• 只读。

element.scrollHeight

• 元素的padding+content高度。
• 只读。

element.scrollTop

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

4、document.body

• html节点中的body节点。

5、document.documentElement

• 根节点，即html节点。

各个浏览器之间对于body和documentElement下的三个height有不同的见解。
参考
https://juejin.cn/post/6844903694442446861#comment
https://www.cnblogs.com/libin-1/p/5964776.html
https://qinzhen001.github.io/2017/10/27/clientHeight-scrollHeight-offsetHeight-myblog/