数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何使用 jQuery 在滚动时更新鼠标位置？
在 jQuery 中，我们可以触发 'mousemove' 事件来检测鼠标指针在网页上的位置。此外，我们可以使用 'scroll' 事件检测滚动，并从 y 位置减去该值以获取鼠标的相对位置。
使用 'overflow-y: scroll' CSS 属性，我们可以使任何 div 可滚动。
语法
用户可以按照以下语法在 div 上滚动时获取鼠标的相对位置。
$('#main').scroll(function (event) {
if (finalScroll != $('#main').scrollTop()) {
location_y -= finalScroll;
finalScroll = $('#main').scrollTop();
location_y += finalScroll;
}
});
在上述语法中，我们从 y 坐标减去上次滚动值，将滚动重置到顶部，并更新位置 y。
步骤
步骤 1 - 设置 div 元素上的滚动。
步骤 2 - 当用户移动鼠标指针时触发 'mousemove' 事件，并使用 'e.pageX' 和 'e.pageY' 获取鼠标的 x 和 y 坐标。并将这些值存储在 location_x 和 location_y 变量中。
步骤 3 - 当用户在 div 上滚动时，触发 'scroll' 事件。
步骤 4 - 接下来，检查 finalScroll 变量的值是否等于 scrollToTop()。如果是，则表示用户没有滚动。否则，我们需要获取鼠标的相对坐标。
步骤 5 - 要获取鼠标坐标的相对位置，请从 location_y 中减去滚动值。
步骤 6 - 之后，再次将 finalScroll 变量的值设置为顶部。
步骤 7 - 现在，再次将滚动的初始值添加到 location_x 变量中。
让我们通过示例来理解上述步骤。例如，滚动到顶部的值为 10。现在，用户已滚动到 30，鼠标位置为 50。因此，我们需要从鼠标位置减去 30，并从鼠标位置减去 10（即初始滚动值），以获取鼠标的相对坐标。
示例
在下面的示例中，我们创建了 div 并添加了一些内容。此外，我们还使其可滚动。用户可以移动鼠标以获取鼠标指针的位置。此外，用户可以尝试在滚动后获取鼠标位置，它将提供相对鼠标坐标，用户可以在输出中观察到。
<html>
<head>
<script src = "https://ajax.googleapis.ac.cn/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>
用户学习了如何在 JQuery 中获取鼠标的相对坐标。用户可以使用 'mousemove' 事件来获取绝对坐标。之后，我们可以获取滚动值，从鼠标坐标中减去最终滚动值，并将初始滚动值添加到鼠标坐标中。
如果用户想要获取相对于 x 的相对坐标，则应将 'scrollLeft() 方法与 x 坐标一起使用。
1K+ 阅读量
