2010-08-19 144 views
17

我想要获取相对于窗口的确切鼠标位置。jquery鼠标相对窗口的位置

这里是我的问题...

  • document.height = 1600(实际文档大小)
  • window.height = 400(可视范围)

我需要相对于鼠标位置弄清楚该窗口,而不是pageY属性提供的文档。

这是一个很大的工具提示,它会弹出一个表项的mouesover。如果屏幕底部没有足够的空间(窗口最大),则工具提示显示在指针上方,否则显示在指针下方。这项工作正常,直到文档大小大于pagesize(长表)。

感谢, 吕克

回答

34

您可以减去window从pageY的.scrollTop()获得位置的窗口,像这样:

var top = e.pageY - $(window).scrollTop(); 

You can give it a try here, take a look at the console

+0

你们真棒。那样做了!谢谢!! – user425772 2010-08-19 21:51:28

+1

@lucl - 欢迎:)欢迎来到SO! – 2010-08-19 21:52:05

+0

伟大的解决方案,如此简单。 OP应标记为解决方案。 – 2015-03-06 18:51:40

0

如何处理document.body.scrollTop属性,它包含您滚动的像素。我相信一个简单的pageY - scrollTop应该就足够了吗?

4

那么window.pageYOffset呢?

演示:

<html> 
<head> 
<style> 
    html,body {padding:0;margin:0} 
    #content {height:2048px;background-color:#ccc;} 
    #status {position:fixed;top:0;left:0;} 
</style> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script type="text/javascript"> 
jQuery(document).ready(function(){ 
    $(document).mousemove(function(e){ 
     $('#status').html(e.pageX +', '+ (e.pageY - window.pageYOffset)); 
    }); 
}) 
</script> 
<body> 
<h2 id="status">0, 0</h2> 
<div id="content"></div> 
</body> 
</html> 
0
function showCoords(evt){ 
    alert(
    "clientX value: " + evt.clientX + "\n" 
    + "clientY value: " + evt.clientY + "\n" 
); 
} 

我认为这是你在找什么。详细请参阅here from Mozilla Developer

相关问题