JQuery положение мыши относительно окна - PullRequest
17 голосов
/ 20 августа 2010

Я пытаюсь получить точное положение мыши относительно окна.

Вот моя проблема ...

  • document.height = 1600 (фактический размер документа)
  • window.height = 400 (для просмотра)

Мне нужно выяснить положение мыши по отношению к окну, а не к документу, который предоставляет атрибут pageY.

Это для большой всплывающей подсказки, которая появляется при mouesover для элемента таблицы,Если в нижней части экрана недостаточно места (максимальное окно), подсказка отображается над указателем, в противном случае - под указателем.Это работает нормально, пока размер документа не будет больше, чем размер страницы (длинная таблица).

Спасибо, Люк

Ответы [ 4 ]

35 голосов
/ 20 августа 2010

Вы можете вычесть .scrollTop() из window со страницы Y, чтобы получить позицию в окне, например:

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

Вы можете дать ейпопробуйте здесь, посмотрите на консоль .

4 голосов
/ 03 июля 2012

А как насчет 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 голосов
/ 09 июля 2015
function showCoords(evt){
  alert(
    "clientX value: " + evt.clientX + "\n"
    + "clientY value: " + evt.clientY + "\n"
  );
}

Я думаю, это то, что вы ищете. Подробнее смотрите здесь от разработчика Mozilla .

0 голосов
/ 20 августа 2010

Как насчет атрибута document.body.scrollTop, он содержит прокрученные пиксели. Я считаю, что простая страница Y - scrollTop должно быть достаточно тогда?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...