🌅 学习 - 获取Dom元素的相对位置

SLYLXDYMJ

字数：297 字

时长：1 分钟

有些特效的实现需要知道 DOM 元素相对于各个参照物的距离，
原生的 DOM 属性以及方法可以轻易的帮助获取到。

获取元素相对于视口的距离

domEl.getBoundingClientRect

使用说明

let react = domObj.getBoundingClientRect();
// => { top, right, bottom, left, width, height }

//  其中 width, height 属性有些兼容问题（IE 中没有这俩属性）

返回值解析

返回值解析

获取元素的定位父元素以及距离

“定位父元素” 是距离自身最近的 position: relative || absolute || fixed 的父级元素
通过元素本身属性即可轻松获取

相关属性

{
  "offsetTop": 12,
  "offsetLeft": 480,
  "offsetParent": "定位父元素的 dom"
}

注意

1. 元素自身有 fixed 定位，offsetParent 的结果为 null
2. 元素自身无 fixed 定位，且父级元素都未经过定位，offsetParent 的结果为 body
3. body 元素的 parentNode 是 null

元素相对于页面最顶部的距离

无现成的属性和方法，可以通过计算而来。

// 当前元素距离视口的距离 + 当前页面的滚动高度 = 元素距离页面最顶部的距离
el.getBoundingClientRect().top + window.pageYOffset