pageX、clientX、screenX、offsetX、ScrollLeft、ScrollTop、clientLeft、screenLeft

Posted 2023-03-20

参考技术A 1、鼠标事件

clientX 设置或获取鼠标指针位置相对于浏览器内容窗口的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。

clientY 设置或获取鼠标指针位置相对于浏览器内容窗口的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条。
(跟screenX相比就是将参照点改成了浏览器内容区域的左上角，该参照点会随之滚动条的移动而移动，也就是说，他计算left或top时直接忽略了滚动条的高和宽，它的参考点是浏览器可见区域的左上角，而不是页面本身的body左上角原点，计算数值和滚动条是否滚动没有关系，只是绝对的计算鼠标点距离浏览器内容区域的左上角的距离，忽略了滚动条的存在)

offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。
offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。

screenX 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标。
screenY 设置或获取鼠标指针位置相对于用户屏幕的 y 坐标。

pageX：参照点是页面本身左上角的原点.已经把滚动条滚过的高或宽计算在内.

所以基本可以得出结论：
pageX > clientX, pageY > clientY
pageX = clientX + ScrollLeft(滚动条滚过的水平距离)
pageY = clientY + ScrollTop(滚动条滚过的垂直距离)

2、网页

网页可见区域宽： document.body.clientWidth;
clientLeft: 获取对象的border宽度
clientTop：获取对象的border高度
网页可见区域高： document.body.clientHeight;
包括padding但不包括border、水平滚动条、margin的元素的高度。对于inline的元素这个属性一直是0，单位px，只读元素。

包括padding、border、水平滚动条，但不包括margin的元素的高度。对于inline的元素这个属性一直是0，单位px，只读元素。

当本元素的子元素比本元素高且overflow=scroll时，本元素会scroll，这时：scrollHeight: 因为子元素比父元素高，父元素不想被子元素撑的一样高就显示出了滚动条，在滚动的过程中本元素有部分被隐藏了，scrollHeight代表包括当前不可见部分的元素的高度。而可见部分的高度其实就是clientHeight，也就是scrollHeight>=clientHeight恒成立。在有滚动条时讨论scrollHeight才有意义，在没有滚动条时scrollHeight==clientHeight恒成立。单位px，只读元素。

网页正文全文宽： document.body.scrollWidth
网页正文全文高： document.body.scrollHeight

网页正文部分上： window.screenTop;
网页正文部分左： window.screenLeft;screenLeft和screenTop属性返回窗口相对于屏幕的X和Y坐标
offsetTop: 当前元素顶部距离最近父元素顶部的距离,和有没有滚动条没有关系。单位px，只读元素。

3、屏幕

屏幕分辨率的高： window.screen.height;
屏幕分辨率的宽： window.screen.width;

获取用户电脑屏幕的高度，是不关浏览器或者顶部工具栏跟底部工具栏的高度的
屏幕可用工作区高度： window.screen.availHeight;
屏幕可用工作区宽度：window.screen.availWidth;

电脑屏幕减掉顶部工具栏跟底部工具栏的高度