如何在javascript中获取相对于窗口视口的鼠标位置？

Question

event.pageY获取相对于整个文档高度的鼠标位置(document.documentElement.offsetHeight我假设).

但是如何获得相对于当前视口的鼠标位置document.documentElement.clientHeight呢？

例如,如果浏览器窗口大小为720像素高度,我向下滚动3页并将鼠标放在窗口中间,位置应为"360",而不是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

鼠标相对于视口的水平位置：

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

完整的选项列表是：

• e.clientY/Y：相对于视口的位置
• e.screenX/Y：相对于屏幕的位置
• e.pageX/Y：相对于页面的位置（如果页面滚动，则与视口不同）

运行下面的代码片段以查看实时更新的不同位置：

const updateView = (e = {}) =>  document.getElementById('log').innerHTML = `
  <div>
    Relative to screen:<br>
    e.screenX: <b>${e.screenX || '0'}</b><br>
    e.screenY: <b>${e.screenY || '0'}</b>
  </div>
  <div>
    Relative to viewport:<br>
    e.clientX: <b>${e.clientX || '0'}</b><br>
    e.clientY: <b>${e.clientY || '0'}</b>
  </div> 
  <div>
    Relative to page (scroll to see the difference with viewport):<br>
    e.pageX: <b>${e.pageX || '0'}</b><br>
    e.pageY: <b>${e.pageY || '0'}</b>
  </div>
`

document.getElementById('content').innerHTML = `BIG CONTENT `.repeat(300)

document.addEventListener('mousemove', updateView)

updateView()

#log { display:flex;justify-content:center;position:fixed }
#log > div { flex: 1 1 0 }

<div id='log'></div>
<div id='content' style='opacity:.1'></div>