scrollTop、offsetHeight和offsetTop等属性用法详解以及兼容性的解决

参考文章：
https://www.jianshu.com/p/d267456ebc0d
https://www.imooc.com/article/17571

image.png

image.png

image.png

详解：

1.scrollHeight:所有的内容(包括肉眼看不见、溢出、被窗口遮挡的部分；)

2.clientHeight:野内可见的内容和内边距，不包括x轴的滚动条高度、边框、外边距(可见区域的底部左右滚动条不算)------元素宽高+Padding

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

image.png

3.offsetHeight:在clientHeight的基础上， 加上边框和滚动条的高度------元素宽高+Padding+margin

offsetHeight不包括margin的元素的高度。对于inline的元素这个属性一直是0，单位px，只读元素。

4.scrollTop: 在clientHeight区内滚动条滚动了多少距离（包括之前已滚动过的隐藏内容）

image.png

image.png

5.scrollTop: 代表在有滚动条时，滚动条向下滚动的距离也就是元素顶部被遮住部分的高度。在没有滚动条时scrollTop==0恒成立。单位px，可读可设置。
6.offsetTop: 当前元素顶部距离最近父元素顶部的距离,和有没有滚动条没有关系。单位px，只读元素。

小礼物走一走，来简书关注我

作者：抖森先森
链接：https://www.jianshu.com/p/990b94e93d2d
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。