How to update mouse location when scrolling with jQuery ?

Last Updated : 01 Aug, 2024

jQuery provides us with an extensive set of MouseEvents that are used to provide information regarding the movements of the mouse pointer. For example, the jQuery mousedown event is emitted when left click is performed over a selected element. To determine the coordinates of the mouse pointer over a selected HTML element, we can simply use the jQuery mousemove event. However, to determine the coordinates of the mouse pointer for a selected element which is being scrolled, we first need to understand how does scroll actually work.

A window object represents a window containing the DOM. The document object points to the DOM which is loaded in the window object. An element represents an object in the document. The viewport is referred to the visible area of a webpage.

The viewport varies with the device on which we are viewing the webpage such as a mobile device, tablet or a computer. The viewport is not an actual HTML element but it is referred as the HTML document which is visible to the user and gets fit into the available space.

In the viewport, every element is associated to scrolling box. Every element within the document that has overflowing content has an associated scrolling box with it. So, whenever the user scrolls, it affects the elements scrolling box and not the entire document. Even the window has an associated scrolling box and it varies depending upon the viewport. So whenever we scroll the entire document, it simply changes whatever we are able to see in the viewport and does not have any effect on the document or the window object itself.

Whenever we perform a scroll, the actual location of the mouse pointer on the document object remains unchanged. So you can simply fetch the relative changes in the position of the mouse pointer within the scrolling box of the element, relative to its last position. This tutorial will demonstrate how to get the relative updated coordinates of the mouse on a scroll using jQuery.

Example: Below is the code example of how to update mouse location when scrolling with jQuery

HTML

<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>How to Update Mouse Location When Scrolling with jQuery?</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
            font-family: 'Arial', sans-serif;
        }
        .container {
            background-color: #ffffff;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            padding: 20px;
            width: 80%;
            max-width: 600px;
            text-align: center;
        }
        h1 {
            color: #2f8d46; 
            margin-bottom: 20px;
        }
        #scroller {
            overflow-y: scroll;
            height: 150px;
            border: 2px solid #2f8d46;
            border-radius: 5px;
            padding: 10px;
            background-color: #f9f9f9;
        }
        #coordinates {
            font-weight: bold;
            color: #555;
        }
        .content {
            margin: 10px 0;
            color: #333;
        }
    </style>
</head> 

<body> 
    <div class="container">
        <h1>Hello GeeksForGeeks</h1>
        <div id="scroller">
            <div>Mouse Coordinates - <span id="coordinates">0, 0</span></div>
            <div class="content">
                A Computer Science portal for geeks. It contains well-written, well-thought, and well-explained computer science and programming articles, quizzes, and more...
            </div>
            <div class="content">
                A Computer Science portal for geeks. It contains well-written, well-thought, and well-explained computer science and programming articles, quizzes, and more...
            </div>
        </div>
    </div>

    <script type="text/javascript"> 
        let xPos = 0; 
        let yPos = 0; 
        let lastScrolled = 0; 

        $(document).ready(function () { 
            // Track mouse movement
            $(document).mousemove(function (event) { 
                xPos = event.pageX; 
                yPos = event.pageY; 
                $("#coordinates").text(`${event.pageX}, ${event.pageY}`);
            }); 

            // Update mouse position on scroll
            $('#scroller').scroll(function () { 
                if (lastScrolled !== $('#scroller').scrollTop()) { 
                    yPos -= lastScrolled; 
                    lastScrolled = $('#scroller').scrollTop(); 
                    yPos += lastScrolled; 
                    console.log(`New X Pos = ${xPos}, New Y Pos = ${yPos}`); 
                } 
            }); 
        }); 
    </script> 
</body> 

</html>

Explanation: The CSS overflow property is used to control the behaviour of the contents of an HTML element which is too big to fit into the viewport. We can simply clip the content using overflow: hidden or add a scroll functionality to view the content of an element in the viewport using overflow: scroll as shown in the code.
The jQuery ready() method is used to wait for the webpage to finish loading before executing the rest of the javaScript code.
The jQuery mousemove() method is used to fetch the X and Y coordinates of the mouse pointer whenever the mouse is moved over a Selected element. We can fetch the coordinates using global Event object as shown in the code.
The jQuery scroll event is emitted when the user scrolls in the selected HTML element scrolling box. The scroll event works for all elements which have an associated scrolling box including the document property of the window object. The scroll() method triggers the scroll event on a selected HTML element as shown in the code.
The jQuery scrollTop() method is used to return the vertical scrollbar position for the selected HTML elements scrolling box. This method can also be used to set the position of the vertical scrollbar. When the scrollbar is at the top and the user has not scrolled, the position is 0. In the code, this method is used to calculate the relative position of the mouse pointer on a vertical scroll i.e. when the selected HTML element is only scrolled vertically (Y-Coordinate) and the horizontal position of the mouse pointer (X-Coordinate) is fixed. In this case, the selected HTML element has a horizontal scroll associated with it, then you can use the jQuery scrollLeft() method to calculate the relative position of the mouse pointer on horizontal scroll as well. To have a better understanding of the above concept, refer the output.