offsetHeight、clientHeight、scrollHeight、scrollTop、offsetTop - Githubissues

xiaokeqi / i-learned

1 stars 0 forks source link

offsetHeight、clientHeight、scrollHeight、scrollTop、offsetTop #29

Open xiaokeqi opened 4 years ago

xiaokeqi commented 4 years ago

以前总是混淆，弄不明白这几个参数的区别今天好好梳理一下

offsetHeight:元素高度，包括border、滚动条宽度。如下图所示

clientHeight:元素高度，包括内容高度和padding。如下图所示

scrollHeight:当子元素高度高于父元素，且父元素本身overflow：scroll，则scrollHeight为子元素高度（content、padding），包括可见与不可见部分。如下图所示：

scrollTop: 代表在有滚动条时，滚动条向下滚动的距离也就是元素顶部被遮住部分的高度。在没有滚动条时scrollTop==0恒成立

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