坐标

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第16天，点击查看活动详情

大多数 JavaScript 方法处理的是以下两种坐标系中的一个：

1. 相对于窗口 —— 类似于 position:fixed，从窗口的顶部/左侧边缘计算得出。

   • 我们将这些坐标表示为 clientX/clientY，当我们研究事件属性时，就会明白为什么使用这种名称来表示坐标。

2. 相对于文档 —— 与文档根（document root）中的 position:absolute 类似，从文档的顶部/左侧边缘计算得出。

   • 我们将它们表示为 pageX/pageY。

当页面滚动到最开始时，此时窗口的左上角恰好是文档的左上角，它们的坐标彼此相等。但是，在文档移动之后，元素的窗口相对坐标会发生变化，因为元素在窗口中移动，而元素在文档中的相对坐标保持不变。

当文档滚动了：

• pageY —— 元素在文档中的相对坐标保持不变，从文档顶部（现在已滚动出去）开始计算。
• clientY —— 窗口相对坐标确实发生了变化（箭头变短了），因为同一个点越来越靠近窗口顶部。

元素坐标：getBoundingClientRect

方法 elem.getBoundingClientRect() 返回最小矩形的窗口坐标，该矩形将 elem 作为内建 DOMRect 类的对象。

主要的 DOMRect 属性：

• x/y —— 矩形原点相对于窗口的 X/Y 坐标，
• width/height —— 矩形的 width/height（可以为负）。

此外，还有派生（derived）属性：

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

例如，点击下面这个按钮以查看其窗口坐标：

如果你滚动此页面并重复点击上面那个按钮，你会发现随着窗口相对按钮位置的改变，其窗口坐标（如果你垂直滚动页面，则为 y/top/bottom）也随之改变。

正如你所看到的，x/y 和 width/height 对矩形进行了完整的描述。可以很容易地从它们计算出派生（derived）属性：

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

请注意：

• 坐标可能是小数，例如 10.5。这是正常的，浏览器内部使用小数进行计算。在设置 style.left/top 时，我们不是必须对它们进行舍入。
• 坐标可能是负数。例如滚动页面，使 elem 现在位于窗口的上方，则 elem.getBoundingClientRect().top 为负数。