offsettop及相关属性介绍

offsettop及相关属性介绍

最近的项目中有用到offsetTop属性配合iscroll插件来进行下拉加载的一个效果，经过测试，在其他浏览器都是OK的，但是在iPhone的safari上页面刚加载完以后，滚动部分会有被遮挡一部分，后来发现是因为获取到的offsetTop值在刚开始进来的时候，并不是0，而是120px，这个刚好是节点元素到页面顶部的距离，所以猜测这里应该是offsetparent不对。那么是哪里不对呢？

---

首先偏移量属性咱们经常会用到offsetLeft、offsetTop、offsetHeight、offsetWidth这四种，然后我们他们的参照点就是offsetParent。我们可以在 HTMLElement.offsetParent里可以看到它只是一个只读属性，而HTMLElement.offsetTop 也是只读属性，它返回当前元素相对于其 offsetParent 元素的顶部内边距的距离。

它的定义是返回一个指向最近的（指包含层级上的最近）包含该元素的定位元素（position不等于static）或者最近的 table,td,th,body元素，在 Webkit 中，如果元素为隐藏的（该元素或其祖先元素的 style.display 为 “none”），或者该元素的 style.position 被设为 “fixed”，则该属性返回 null。

在 IE 9 中，如果该元素的 style.position 被设置为 “fixed”，则该属性返回 null。（display:none 无影响。）

也就是说要获取到正确的offsetTop值，首先要确保它的最近的定位元素不能是fixed和static。其次确保style.display不能为none。