屏幕坐标、客户区域（可视窗口）坐标、页面坐标分别是什么？

这三个坐标系在前端开发中经常用到，它们之间的区别在于参照点的不同：

• 屏幕坐标 (Screen Coordinates): 指的是相对于整个屏幕的坐标系。原点 (0,0) 位于屏幕的左上角。屏幕坐标的单位是像素，值会随着屏幕分辨率的变化而变化。例如，screenX 和 screenY 属性可以获取鼠标指针相对于整个屏幕的坐标。

• 客户区域/可视窗口坐标 (Client/Viewport Coordinates): 指的是相对于浏览器可视窗口的坐标系。原点 (0,0) 位于可视窗口的左上角。可视窗口指的是不包括浏览器工具栏、菜单栏、滚动条等部分的区域，也就是用户实际看到的网页内容区域。clientX 和 clientY 属性可以获取鼠标指针相对于可视窗口的坐标。当页面滚动时，元素在可视窗口中的位置会发生变化，因此客户区域坐标也会随之改变。

• 页面坐标 (Page Coordinates): 指的是相对于整个文档的坐标系。原点 (0,0) 位于文档的左上角。即使页面发生了滚动，元素在文档中的位置不变，因此页面坐标也不会改变。pageX 和 pageY 属性可以获取鼠标指针相对于整个文档的坐标。需要注意的是，pageX 和 pageY 属性在一些较老的浏览器中可能不被支持。可以使用 clientX/clientY 加上页面滚动偏移量来模拟。

如何获取滚动偏移量：

可以使用以下方法获取页面的水平和垂直滚动偏移量：

• window.pageXOffset 或 window.scrollX： 获取水平滚动偏移量。
• window.pageYOffset 或 window.scrollY： 获取垂直滚动偏移量。

总结：

坐标系	参照点	获取方式	受滚动影响
屏幕坐标	屏幕左上角	screenX, screenY	否
客户区域/可视窗口坐标	可视窗口左上角	clientX, clientY	是
页面坐标	文档左上角	pageX, pageY	否

示例：

假设鼠标指针位于可视窗口的 (100, 50) 处，页面水平向右滚动了 20px，垂直向下滚动了 30px。

• 屏幕坐标：取决于鼠标在屏幕上的实际位置，无法根据上述信息确定。
• 客户区域坐标： (100, 50)
• 页面坐标： (120, 80) (100 + 20, 50 + 30)

希望以上解释能够帮助你理解这三种坐标系的区别。