html中的offsetTop的使用

Posted 2023-04-20

参考技术A

1. offsetTop ：元素到offsetParent顶部的距离

2. offsetParent ：距离元素最近的一个具有定位的祖宗元素（relative，absolute，fixed），若祖宗都不符合条件，offsetParent为body。如下图所示：获取child的offsetTop，图1的offsetParent为father，图2的offsetParent为body。

3. 注意：只有元素show（渲染完成）才会计算入offsetTop，若是中间有元素数据需要异步获取，会导致最终获取的offsetTop值偏小

scrollTop和offsetTop的区别，scrollTopLeft和offsetLeft的区别

scrollTop和offsetTop的区别：
scrollTop是指某个可滚动区块向下滚动的距离，比如向下滚动了10个像素，那么这个元素的scrollTop属性值就是10，这个属性的值是可读写的，且不需要设置position
offsetTop则是元素的上边框与父元素的上边框的绝对距离。

scrollLeft：设置或获取对象最左端和对象内容的最左端之间的距离，这个属性的值是可读写的
offsetLeft：获取对象相对于版面或由offsetParent属性指定的父坐标的左侧位置。

调用scrollLeft和scrollTop必须在父元素上，否则无效

taget.style.top 是作用于具体元素的，而不是作用于父元素，要想起作用必须设置position值