offsettop及相关属性介绍

前言

  最近做项目时遇到监听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有区别）。

---

基本上就是这些了，后面再想到其他的或细节的部分再进行补充。