Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to update mouse location when scrolling with jQuery?
In jQuery, we can trigger the ‘mousemove’ event to detect the mouse pointer's location on the web page. Also, we can detect the scroll using the ‘scroll’ event and subtract that value from the y position to get the relative mouse location.
Using the ‘overflow-y: scroll’ CSS property, we can make any div scrollable.
Syntax
Users can follow the syntax below to get the relative mouse position while scrolling on the div.
$('#main').scroll(function (event) {
if (finalScroll != $('#main').scrollTop()) {
location_y -= finalScroll;
finalScroll = $('#main').scrollTop();
location_y += finalScroll;
}
});
In the above syntax, we subtract the last scroll value from the y coordinate, set the scroll to the top again, and update the location y.
Steps
Step 1 − Set the scroll on the div element.
Step 2 − Trigger the ‘mousemove’ event whenever the user moves the mouse pointer, and get the x and y coordinates of the mouse using the ‘e.pageX’ and ‘e.pageY’. Also, store the values in the location_x and location_y variables.
Step 3 − When the user scrolls on the div, trigger the ‘scroll’ event.
Step 4 − Next, check if the finalScroll variable’s value equals the scrollToTop(). If yes, it means users haven’t scrolled. If not, we need to get the relative mouse coordinates.
Step 5 − To get the relative location of mouse coordinates, subtract the scroll value from the location_y.
Step 6 − After that, again set the finalScroll variable’s value to the top.
Step 7 − Now, again, add the initial value of scroll to the location_x variable.
Let’s understand the above steps via example. For example, the value of the scroll to the top is 10. Now, users have scrolled to 30, and the mouse location is 50. So, we need to remove 30 from the mouse location and 10 from the mouse location, which is the initial scroll value to get relative mouse coordinates.
Example
In the example below, we created the div and added some content. Also, we made it scrollable. Users can move the mouse to get the location of the mouse pointer. Also, users can try to get the mouse location after scrolling, and it will give relative mouse coordination, which users can observe in the output.
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js">
</script>
</head>
<body>
<h3>Updating the mouse location while scrolling on the div using jQuery</h3>
<div> Mouse Coordinates -
<span id = "location"> </span>
</div>
<div id = "main" style = "overflow-y: scroll;
height:100px;width: 500px">
<br> <br>
TutorialsPoint is a popular online learning platform that offers a vast array of tutorials and courses on
various technical and non-technical subjects. Their courses cover a wide range of topics, including programming,
web development, database management, digital marketing, and more. The platform is user-friendly, with
easy-to-follow lessons and examples that help learners grasp concepts quickly. TutorialsPoint also provides
certification courses that can enhance your career opportunities. The site is updated regularly to keep up with
the latest trends and technologies.
</div>
<br> <br>
<div> Scrolled location is -
<span id = "scroll"> </span>
</div>
<script>
var location_x = 0;
var location_y = 0;
var finalScroll = 0;
$(document).ready(function (event) {
$(document).mousemove(
(e) => {
location_x = e.pageX;
location_y = e.pageY;
$("#location").text("X coordinate is - " + location_x + ", Y coordinate is - " + location_y);
}
);
$('#main').scroll(function (event) {
if (finalScroll != $('#main')
.scrollTop()) {
location_y -= finalScroll;
finalScroll = $('#main')
.scrollTop();
location_y += finalScroll;
$("#scroll").text("Scrolled coordinate is - " + location_x + ", Y coordinate is - " + location_y);
}
});
});
</script>
</body>
</html>
Users learned to get the relative mouse coordinates in JQuery. Users can use the ‘mousemove’ event to get the absolute coordinates. After that, we can get the scroll value, subtract the final scroll value from the mouse coordinates, and add the initial scroll value to the mouse coordinates.
If users want to get the relative coordinates to the x, they should use the ‘scrollLeft() method with x coordinates.
978 Views
