How to check whether the mouse is moving upwards or downwards using JavaScript?

Question

I found this solution in another topic. It works correctly when moving your mouse downwards.

However, if you move your mouse upwards with a little curve in it, the console will both log From Top and From Bottom.

$(document).ready(function() { var mY = 0; $(document).mousemove(function(e) { // moving upward if (e.pageY < mY) { console.log('From Bottom'); // moving downward } else { console.log('From Top'); } // set new mY after doing test above mY = e.pageY; });
});

code { background: #ededed; padding: 0 5px;
}
span { color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
So instead of moving <span>straight up</span>, go from the <span>left bottom corner</span> to the <span>right top corner</span> with a small <span>curve</span>. Moving your mouse up or down. It will log both <code>From Top</code> and <code>From Bottom</code>

Answer 1

You can check mouse position 1 second after mousemove, And to do this use setTimeout

$(document).ready(function() { var mY = 0; $(document).mousemove(function(e) { if(mY != e.pageY){// Works only if pageY changes if (e.pageY < mY) { document.querySelector("#mousemove").innerHTML = "From Bottom"; } else { document.querySelector("#mousemove").innerHTML = "From Top"; } setTimeout(function(){ mY = e.pageY; },500);//500 means 0.5 second, You can change it }else{ document.querySelector("#mousemove").innerHTML = "Left Right"; } });
});

code { background: #ededed; padding: 0 5px;
}
span { color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
So instead of moving <span>straight up</span>, go from the <span>left bottom corner</span> to the <span>right top corner</span> with a small <span>curve</span>. Moving your mouse up or down. It will log both <code>From Top</code> and <code>From Bottom</code>
<div id="mousemove"></div>

Answer 2

I think your code snippet works fine. Perhaps the only actual thing needed in order to see that you get some false positives when the mouse is moving left-right or the opposite is to make a small addition in your code as seen below.

$(document).ready(function() { var mY = 0; $(document).mousemove(function(e) { // moving upward if (e.pageY < mY) { console.log('Up'); // moving downward } else if (e.pageY > mY) { console.log('Down'); // movement on horizontal axis } else { console.log('Moving left-right or the opposite'); } // set new mY after doing test above mY = e.pageY; });
});

code { background: #ededed; padding: 0 5px;
}
span { color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
So instead of moving <span>straight up</span>, go from the <span>left bottom corner</span> to the <span>right top corner</span> with a small <span>curve</span>. Moving your mouse up or down. It will log both <code>From Top</code> and <code>From Bottom</code>

Answer 3

var mY = 0;
$('body').mousemove(function(e) { // moving upward if (e.pageY < mY) { console.log('From Bottom'); // moving downward } else { console.log('From Top'); } // set new mY after doing test above mY = e.pageY;
});

This uses jquery. We select the whole body and add the move mouse function which detects the mouse. The first if statement moves up after comparing the page coordinates and vice versa for else. Then we save the y coordinates into the variable mY