如何在 javascript 中获得相对于 window 视口的鼠标 position？

Question

event.pageY获取鼠标 position 相对于整个文档高度（我假设document.documentElement.offsetHeight ）。

但是如何获得相对于当前视口的鼠标 position ，即document.documentElement.clientHeight ？

For example, if the browser window size has a 720 pixel height, I scroll down 3 pages and keep the mouse in the middle of the window, the position should be "360", not 1800 (720 x 3 - 720 / 2).

Answer 1

尝试使用event.clientY应该始终返回正确的值，而不管滚动

https://developer.mozilla.org/en-US/docs/DOM/event.clientY

Answer 2

使用event.clientY获取鼠标相对于浏览器视口的位置（兼容性表）。

Answer 3

我处于类似情况，我需要光标在视口中的坐标（因为我的页面是可滚动的）。

我在这里尝试了其他答案，一旦滚动屏幕，它们似乎就不起作用（它们适用于不可滚动的页面）。

在阅读了https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent的一些文档页面后，我发现在使用可滚动页面时，如果您需要当前视口的 X 和 Y 坐标（即即使滚动），最好使用event.pageX代替。

var pageX = MouseEvent.pageX;

https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/pageX

Answer 4

这是一个代码示例：

document.addEventListener('mousemove', event => {
    console.log(event.clientY) // THIS should do what you want     
})

单击下面的代码段以查看它的实际效果：

 document.addEventListener('mousemove', e => { document.getElementById('log').innerHTML = ` Relative to screen:<br> e.screenX: <b>${e.screenX}</b><br> e.screenY: <b>${e.screenY}</b><br><br> Relative to viewport:<br> e.clientX: <b>${e.clientX}</b><br> e.clientY: <b>${e.clientY}</b>` })

 <div id='log'></div>