最近在做组件的过程中遇到滚动在切换过程中没有恢复到顶部,于是发现这几个容易混淆的属性。
每个HTML元素都具有clientHeight offsetHeight scrollHeight offsetTop scrollTop 这5个和元素高度、滚动、位置相关的属性,单凭单词很难搞清楚分别代表什么意思之间有什么区别。
clientHeight
clientHeight
:对于没有CSS或内联布局框的元素,Element.clientHeight
属性为只读且值一直为0;否则,它是元素的内部高度(以px为单位)。它包括 padding
,但不包括 border
,margin
和水平滚动条(如果有水平滚动条)
可以将 clientHeight
计算为:CSS height + CSS padding - height of horizontal scrollbar
(如果有水平滚动条)
【CSS高度+ CSS填充-水平滚动条的高度】
var intElemClientHeight = element.clientHeight;
intElemClientHeight
是与元素的 clientHeight
相对应的整数,以px为单位。 clientHeight
属性为只读。
offsetHeight
offsetHeight
:HTMLElement.offsetHeight
的属性为只读,以整数形式返回元素的高度,包括 vertical padding
和 borders
【垂直内边距和边框】。
通常,offsetHeight
以px为单位的CSS高度的度量,包括 any borders
, padding
, 和 horizontal scrollbars
【任何边框,内边距和水平滚动条(如果呈现)】。但是不包含伪元素的高度,例 ::before
和 ::after
。延伸到其他线性内容以下的浮动元素将被忽略。
如果一个元素是隐藏状态,即将 style.display
设置为 none
,这个时候为0。
var intElemOffsetHeight = element.offsetHeight;
scrollHeight
scrollHeight
:Element.scrollHeight
只读属性是元素内容高度的度量,其中包括由于溢出而在屏幕上不可见的内容。所以 scrollHeight>=clientHeight
是一直成立的。
scrollHeight
值等于元素内容所需的最小高度,以便在不使用垂直滚动条的情况下适合视口中的所有内容。高度的测量方法与 clientHeight
相同:它包括 padding
,但不包括 border
,margin
和水平滚动条(如果有水平滚动条)。它还可以包括伪元素的高度,例如 :: before
或 :: after
。如果元素不需要 vertical scrollbar
【垂直滚动条】就可以容纳所有内容,则其 scrollHeight==clientHeight
。
var intElemScrollHeight = element.scrollHeight;
intElemScrollHeight
是一个变量,用于存储一个与元素的 scrollHeight
像素值相对应的整数。 scrollHeight
属性是只读的。
offsetTop
offsetTop
:HTMLElement.offsetTop
属性是只读,返回当前元素相对于最近的 offsetParent
父节点顶部的距离。和滚动条没有关系。
topPos = element.offsetTop;
Example:
var d = document.getElementById("div1");
var topPos = d.offsetTop;
if (topPos > 10) {
// object is offset more
// than 10 pixels from its parent
}
scrollTop
scrollTop
:Element.scrollTop
属性获取或设置元素内容垂直滚动的px。
有滚动条的时候,scrollTop
值是从元素顶部到其最顶部可见内容的距离的度量。当元素的内容没有垂直滚动条时,则scrollTop=0
。
官方文档链接:
clientHeight
offsetHeight
scrollHeight
offsetTop
scrollTop