前言
最近做项目时遇到监听html滚动相关的功能,涉及到offsettop属性,以前认为参考点就是相对body,结果发现项目中非首屏的元素得到的offsettop居然是0,后来才知道原来有个offsetparent属性,是以这个来定位的,这次也将相关属性一并介绍一下。
offsetParent定位父级
偏移量属性一般就是offsetLeft、offsetTop、offsetHeight、offsetWidth这四种了,然后还有一个offsetParent属性作为偏移的参照点。在网上看到的offsetParent的定义是:与当前元素最近的经过定位(position不等于static)的父级元素(感觉和绝对定位的定位点很类似?)。然后具体情况分为下面几种:
1. position为fixed时,offsetParent为null,offsettop的值和top相等。此时元素是以视口来定位的。
2. position非fixed,父级元素无定位(static)时,offsetParent为body。
3. position非fixed,父级元素有定位时,offsetParent为最近的有定位的父级元素。
4. body元素,offsetParent为null,offsettop为0(似乎是废话)。
偏移量属性
offsetLeft:元素相对于定位父级左内框的距离; offsetTop: 元素相对于定位父级顶部内框的距离。
offsetWidth: 元素在水平方向上占用的空间大小,无单位(以像素px计); offsetHeight: 表示元素在垂直方向上占用的空间大小,无单位(以像素px计)。包括滚动条的宽度。
tips:偏移量属性都是只读的
其他类似属性
scrollHeight和scrollWidth,可滚动的绝对宽高,包括隐藏不可见的部分(offset仅是相对于元素的width和height不包括隐藏部分)。
scrollTop和scrollLeft: 可滑动的元素(即元素出现滚动条的情况时)内部在xy轴上滑动的距离,可为其赋值。
clientHeight和clientWidth:可视区域的宽高(不同浏览器中clientHeight和offsetWidth有区别)。
基本上就是这些了,后面再想到其他的或细节的部分再进行补充。