offsettop及相关属性介绍

  • Post author:
  • Post category:其他




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。



版权声明:本文为qq_42345237原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。