定位计算距离&获取大小常用API

offset系列

offsetParent(html和body之间的空隙被消除掉)

• 本身定位为fixed
  • offsetParent：null(除了火狐)
  • offsetParent：body(火狐)
    offsetLeft和offsetTop 都是参照于body的！！！
• 本身定位不为fixed
  • offsetParent：body(父级没有定位)
  • offsetParent：定位父级(父级没有定位)

offsetTop

• 只读属性，它返回当前元素相对于其 offsetParent 元素的顶部的距离

offsetLeft

• 只读属性，返回当前元素左上角相对于offsetParent 节点的左边界偏移的像素值（可以称为一个元素的物理或图形尺寸或者<border-box>）

offsetWidth

• 返回一个元素的布局宽度,高度包含该元素的垂直内边距和边框，且是一个整数

Elemetn.offsetHeight

• 返回一个元素的布局高度,高度包含该元素的垂直内边距和边框，且是一个整数（可以称为一个元素的物理或图形尺寸或者<border-box>）

对块级元素来说，offsetTop、offsetLeft、offsetWidth 及 offsetHeight 描述了元素相对于 offsetParent 的边界框。

---

getBoundingClientRect()系列

方法返回元素的大小及其相对于视口的4个位置

height&width

• 返回元素的高度&宽度
  与offsetWidth/offsetHeight比较
  getBoundingClientRect().width/height 返回的是一个浮点数值
  offsetWidth返回的值是经过round(四舍五入)的整数

left&top:

• 返回元素左边到视口左边顶部的距离
• 返回元素顶部到视口顶部的距离
  当滚动位置发生了改变，top和left属性值就会随之立即发生变化（因此，它们的值是相对于视口的，而不是绝对的）

right

• 返回元素右边到视口左边的距离

bottom

• 返回元素底部到视口顶部的距离

图解

图解.png

---

xxx.Width系列

offsetWidth

• 返回一个元素的布局宽度,高度包含该元素的垂直内边距和边框，且是一个整数(border-box)

clientWidth

• 表示元素的内部宽度，以像素计。该属性包括内边距，但不包括垂直滚动条（如果有）、边框和外边距。(padding-box)

scrollWidth

• 只读属性，表示元素内容的宽度，包括由于滚动而未显示在屏幕中内容(padding-box)
• 如果元素的内容可以适合而不需要水平滚动条，则其scrollWidth等于clientWidth

---

scroll相关

scrollTop

• 可以获取或设置一个元素的内容垂直滚动的像素数
  document.documentElement.scrollTop 获取系统滚动条滑动的距离

scrollLeft

• 读取或设置元素滚动条到元素左边的距离

scrollWidth&scrollHeight

• 只读属性是一个元素内容高度的度量，包括由于溢出导致的视图中不可见内容。
• 只读属性是一个元素内容高度的度量，包括由于溢出导致的视图中不可见内容。
  在内容不溢出的情况下scrollWidth/scrollHeightclientWidth/clientHeight获取的都是padding-box的宽度/高度