和视口宽高和滚动高度相关元素

window

innerHeight与outerHeight

• innerHeight是DOM视口的大小，包括滚动条。
• outerHeight是整个浏览器窗口的大小，包括窗口标题、工具栏、状态栏等。

element

client

clientHeight

返回元素内部可视的高度(单位像素)，包含内边距，但不包括水平滚动条、边框和外边距。clientWidth则水平宽度。(当没出现滚动条时，clientHeight == scrollHeight)

image.png

clientTop

一个元素顶部边框的宽度。clientLeft 则是元素的左边框的宽度。

offset

offsetHeight

包括padding、border、水平滚动条，但不包括margin的元素的高度。对于inline的元素这个属性一直是0，单位px，只读元素。

image.png

offsetTop

当前元素顶部距离最近父元素顶部的距离,和有没有滚动条没有关系。单位px，只读元素。

image.png

有关 scroll 的属性

scrollHeight

计算元素内容高度的只读属性。scrollWidth 则是计算内容宽度的只读属性。

image.png

scrollTop

可以设置或者获取一个元素内容超出距离。scrollLeft 则是内容宽度超出距离。

image.png

总结

scrollHeight 是盒子内容高度
clientHeight 是盒子内容高度 + 内边距
offsetHeight 是盒子内容高度 + 内边距 +滚动条 + 边框