17

how can i get the mouse position when i scroll down or scroll up

i tried this

$(document).mousemove(function(event) {
    captureMousePosition(event);
}).scroll(function(event) {
    xMousePos = event.pageX + $(document).scrollLeft();
    yMousePos = event.pageY + $(document).scrollTop();
    window.status = "x = " + xMousePos + " y = " + yMousePos;
});

function captureMousePosition(event){
    xMousePos = event.pageX;
    yMousePos = event.pageY;
    window.status = "x = " + xMousePos + " y = " + yMousePos;
}

but didnt worked i want the exact position of mouse relative to the top of page not in respect to window(frame)

Varun
  • 5,001
  • 12
  • 54
  • 85
  • which version??? i tested on ff5 it didnt worked – Varun Jun 29 '11 at 11:55
  • FF5. so do you need position relative to the document or relative to the window? your script give pos relative to the document. so if window height = 2000, document height = 5000, in the end of page script will give 5000, not 2000. – korywka Jun 29 '11 at 12:33
  • @ taras Neporozhniy : so why its not working on my end. i want the same.... confused – Varun Jun 30 '11 at 03:19

2 Answers2

19

we cannot get mouse current position on scroll we can just get how much it scrolled relative to last position so changed it to :

var xMousePos = 0;
var yMousePos = 0;
var lastScrolledLeft = 0;
var lastScrolledTop = 0;

$(document).mousemove(function(event) {
    captureMousePosition(event);
})  

    $(window).scroll(function(event) {
        if(lastScrolledLeft != $(document).scrollLeft()){
            xMousePos -= lastScrolledLeft;
            lastScrolledLeft = $(document).scrollLeft();
            xMousePos += lastScrolledLeft;
        }
        if(lastScrolledTop != $(document).scrollTop()){
            yMousePos -= lastScrolledTop;
            lastScrolledTop = $(document).scrollTop();
            yMousePos += lastScrolledTop;
        }
        window.status = "x = " + xMousePos + " y = " + yMousePos;
    });
function captureMousePosition(event){
    xMousePos = event.pageX;
    yMousePos = event.pageY;
    window.status = "x = " + xMousePos + " y = " + yMousePos;
}

it worked and is working on multi browsers....

anyways thanks all :)

Varun
  • 5,001
  • 12
  • 54
  • 85
  • 1
    Can you give more info on why `"we cannot get mouse current position on scroll"`? Thank you very much @Varun. – Alan Dong Jun 11 '15 at 21:46
  • @AlanDong Because "scroll" event is giving `undefined` when trying to get `e.pageX` or `e.pageY` instead of other events. – Jazi Mar 09 '17 at 13:21
  • 1
    @Varun It worked perfectly. I was trying to move a div based on `mousemove` event. But `onscroll` I couldn't get access to mouse coords until I implemented your code. Much thanks! – protoEvangelion Sep 08 '17 at 18:49
  • This didn't work for me. Would return undefined when scrolling on Chrome – Jack Nov 12 '17 at 13:48
  • 1
    Event page is obsolete, you shouldn't use it https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/pageX – titusfx Oct 09 '20 at 11:35
  • Years after, but thats exactly what i was searching. Thank you :D – Raqha Apr 27 '21 at 20:09
-3

i didn't tried this you try:

$(document).ready(function(){
   $(document).scroll(function(e){
      $('#status').html(e.pageX +', '+ e.pageY);
   }); 
});
deepi
  • 1,081
  • 10
  • 18