元素的坐标

当我们需要移动元素时，我们应该先熟悉坐标

• 相对于窗口：类似于position:fixed，称之为：clientX / clientY

• 相对于文档：与文档根(document root)中的position:absolute类似：我们表示为 pageX / pageY

请看下图：

• pageY 文档滚动了，元素在文档中的相对坐标保持不变，从文档顶部(滚出去的部分)开始计算
• clientY 文档滚动了，窗口的相对坐标发生了变化，因为同一个点越来越靠近窗口顶部

元素坐标：getBoundingClientRect()

获取元素的坐标信息：

• x / y 矩形原点相对于窗口的 X / Y坐标

• width / height 矩形的 width / height (可以为负)

• 还有派生属性 derived 属性

  • top / bottom 顶部 / 底部矩形边缘的Y坐标
  • left / right 左 / 右矩形边缘的X坐标

element.getBoundingClientRect()的输出示意图

计算派生属性 derived

• left = x
• top = y
• right = x +width
• bottom = y + height

注意点：

1. IE浏览器不支持 x / y

2. 坐标的 right / bottom 与 css中的 position属性不同

   • 在css中，right 属性表示距右边缘的距离，而 bottom属性表示距下边缘的距离
   • 但在js中不是，所有数据都是从窗口的左上角开始计数

document.elementFromPoint(x, y)

精准返回处于当前坐标的元素

• 对于窗口之外的坐标，返回值是 null

当我们需要把某些内容放到文档中的某个位置，并且在滚动时，文档仍然保留在某个元素附近

// 获取元素的文档坐标
function getCoords(elem) {
  let box = elem.getBoundingClientRect();
​
  return {
    top: box.top + window.pageYOffset,
    right: box.right + window.pageXOffset,
    bottom: box.bottom + window.pageYOffset,
    left: box.left + window.pageXOffset
  };
}
​
​
function createMessageUnder(elem, html) {
  let message = document.createElement('div');
  message.style.cssText = "position:absolute; color: red";
​
  let coords = getCoords(elem);
​
  message.style.left = coords.left + "px";
  message.style.top = coords.bottom + "px";
​
  message.innerHTML = html;
​
  return message;
}
​

上述代码，我们将其与 position:absolute一起使用，这样就可以做到，当页面滚动时，消息仍在某个元素附近

总结：

• 相对于窗口的坐标 ： element.getBoundingClientRect()

• 相对于文档：element.getBoundingClientRect() + 当前页面滚动（与position连用）

  top: box.top + window.pageYOffset,
  right: box.right + window.pageXOffset,
  bottom: box.bottom +window.pageYOffset,
  left: box.left + window.pageXOffset
  

详细文档参考：zh.javascript.info/coordinates

                  ---------------------------------------------------------持续更新的第六天