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.
-
Step 1: Install Browsersync using npm. We will use Browsersync to start a server and provide a URL to view the HTML site and to load jQuery using CDN (Content Delivery Network) as shown in the code. We will install Browsersync globally.
npm install -g browser-sync
-
Step 2: Create an index.html file in your project root folder.
index.html: Add the following code snippet in that file.html<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>jQuery Mouse Events</title><scriptsrc=</script></head><body><divid="scoller"style="overflow-y: scroll;height:100px;"><h1>Hello GeeksForGeeks</h1><div>Mouse Coordinates -<spanid="coordinates"></span></div><br><br><div>A Computer Science portal forgeeks. It contains well written,well thought and well explainedcomputer science and programmingarticles, quizzes and ...</div><div>A Computer Science portal forgeeks. It contains well written,well thought and well explainedcomputer science and programmingarticles, quizzes and ...</div></div><scripttype="text/javascript">var xPos = 0;var yPos = 0;var lastScrolled = 0;$(document).ready(function (event) {// Coordinates of the Mouse$(document).mousemove(function (event) {// console.log(event);xPos = event.pageX;yPos = event.pageY;$("#coordinates").text(event.pageX+ ", " + event.pageY+ " ----- " + event.clientX+ ", " + event.clientY);});// New Relative Position of Mouse// on Scroll Functionality$('#scoller').scroll(function (event) {if (lastScrolled != $('#scoller').scrollTop()) {yPos -= lastScrolled;lastScrolled = $('#scoller').scrollTop();yPos += lastScrolled;console.log("New X Pos = " + xPos+ " New Y Pos = " + yPos);}});});</script></body></html> -
Step 4: To launch the application using Browsersync, run the following command in the project directory.
browser-sync start --server --files "*"
This starts Browsersync in server mode and watches all the files within the directory for changes as specified by the * wildcard. The application will be launched at http://localhost:3000/ by default.
Output:
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.