clientX、scrollX 和 offsetX 的区别

见解分享

2023-12-12 00:55:39

图文小解

在 Web 开发中，clientX、scrollX 和 offsetX 是三个经常遇到的属性，它们都与元素在页面中的位置有关。然而，它们之间的区别往往让人感到困惑。本文将通过图文并茂的方式，清晰阐述这三个属性的含义和区别。

客户端坐标（clientX/clientY）

clientX 和 clientY 属性表示元素在客户端窗口（浏览器窗口）中的位置。这两个属性相对于浏览器的左上角，单位为像素。

clientX：元素左上角距离浏览器窗口左边缘的水平距离。
clientY：元素左上角距离浏览器窗口上边缘的垂直距离。

滚动偏移量（scrollX/scrollY）

scrollX 和 scrollY 属性表示元素相对于其容器（通常是其父元素）的滚动偏移量。这两个属性相对于容器的左上角，单位为像素。

scrollX：元素左上角距离容器左边缘的水平滚动偏移量。
scrollY：元素左上角距离容器上边缘的垂直滚动偏移量。

偏移量（offsetX/offsetY）

offsetX 和 offsetY 属性表示元素相对于其包含块（最近的块级祖先元素）的偏移量。这两个属性相对于包含块的左上角，单位为像素。

offsetX：元素左上角距离包含块左边缘的水平偏移量。
offsetY：元素左上角距离包含块上边缘的垂直偏移量。

区别

clientX、scrollX 和 offsetX 的主要区别在于它们的参考点不同：

clientX 相对于浏览器窗口。
scrollX 相对于容器。
offsetX 相对于包含块。

这三个属性的具体用法取决于所涉及的元素和所需的计算。

实例

为了进一步说明这三个属性的区别，让我们看一个示例：

<div id="container" style="width: 300px; height: 200px; overflow: scroll;">
  <div id="element" style="width: 100px; height: 100px;"></div>
</div>

在这个示例中：

container 元素是元素的容器。
element 元素包含在容器内。

使用 JavaScript，我们可以获取这三个元素的属性值：

const element = document.getElementById("element");
console.log("clientX:", element.clientX); // 输出：浏览器窗口左边缘的水平距离
console.log("scrollX:", element.scrollX); // 输出：容器左边缘的水平滚动偏移量
console.log("offsetX:", element.offsetX); // 输出：包含块左边缘的水平偏移量