官方释义

HTMLElement.offsetTop 为只读属性，它返回当前元素相对于其 offsetParent 元素的顶部的距离。

我的理解

之前一直误以为返回的永远是元素到文档顶部的距离值，然而这种理解真的是too naive啊。。。
这次遇到需求是图片元素露出窗口才可见的lazy load功能，offsetTop老是获取“错误”，才发现对此属性的理解就是错误的 🤣

这个offsetParent指元素最近的有定位属性的上级元素，有两个特殊情况需要注意：

  • 如果没有定位的元素，则 offsetParent 为最近的 table 元素对象或根元素（标准模式下为 html；quirks 模式下为 body）；
  • 当元素的 style.display 设置为 “none” 时，offsetParent 返回 null

参考

MDN/Web 技术文档/HTMLElement.offsetTop