如何区分scrollTop、scrollHeight、offsetTop、offsetHeight在JavaScript中的具体应用？

本文共计1141个文字，预计阅读时间需要5分钟。

全文参考：https://github.com/iuap-design/blog/issues/38、MDN clientHeight

仅读clientHeight可以用公式CSS height + CSS padding + 水平滚动条的高度（如有）来计算。

如图，这样一个div，它的clientHeight可以这样计算：

全文参考：github.com/iuap-design/blog/issues/38 、MDN

clientHeight，只读

clientHeight可以用公式 CSS height + CSS padding - 水平滚动条的高度 (如果存在) 来计算。

如图，这样一个div，它的clientHeight为95，计算：50(height)+30(padding-top)+30(padding-bottom)-15(经测量滚动条高度就是15)=95

clientTop，只读

一个元素顶部边框的宽度（以像素表示）。嗯。。就只是border-top-width

类似的属性还有一个clientLeft，顾名思义……

offsetHeight，只读

元素的offsetHeight是一种元素CSS高度的衡量标准，包括元素的边框、内边距和元素的水平滚动条（如果存在且渲染的话），是一个整数。

还是上面的图，div的offsetHeight为112。