如何用jQuery更新滚动时的鼠标位置

jQuery为我们提供了一套广泛的MouseEvents，用于提供有关鼠标指针移动的信息。例如，jQuery的mousedown事件是在左键点击一个选定的元素时发出的。为了确定鼠标指针在一个选定的HTML元素上的坐标，我们可以简单地使用jQuery mousemove事件。然而，要确定一个正在滚动的选定元素的鼠标指针的坐标，我们首先需要了解滚动是如何工作的。

一个窗口对象代表一个包含DOM的窗口。文档对象指向窗口对象中加载的DOM。一个元素代表文档中的一个对象。
视口是指网页的可见区域。

视口随我们查看网页的设备而变化，如移动设备、平板电脑或计算机。视口不是一个实际的HTML元素，但它被称为HTML文档，它对用户来说是可见的，并被装入可用空间。

在视口中，每个元素都与滚动框有关。文档中每个有溢出内容的元素都有一个与之相关的滚动框。所以，每当用户滚动时，它影响的是元素的滚动框，而不是整个文档。甚至窗口也有一个相关的滚动框，它根据视口的不同而变化。所以当我们滚动整个文档时，它只是改变了我们在视口中能够看到的东西，对文档或窗口对象本身没有任何影响。

每当我们执行滚动时，鼠标指针在文档对象上的实际位置保持不变。因此，你可以简单地获取鼠标指针在元素滚动框内的位置相对于其最后位置的相对变化。本教程将演示如何使用jQuery获取滚动中鼠标的相对更新坐标。

第1步：使用npm安装Browsersync。我们将使用Browsersync来启动一个服务器，并提供一个URL来查看HTML网站，并使用CDN（内容交付网络）加载jQuery，如代码所示。我们将在全球范围内安装Browsersync。

npm install -g browser-sync

第2步：在你的项目根目录下创建一个index.html文件。
index.html：在该文件中添加以下代码片段。

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <title>jQuery Mouse Events</title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>
</head>
  
<body>
    <div id="scoller" style=
        "overflow-y: scroll; 
        height:100px;">
  
        <h1>Hello GeeksForGeeks</h1>
          
        <div>Mouse Coordinates - 
            <span id="coordinates"></span>
        </div>
          
        <br><br>
          
        <div>
            A Computer Science portal for 
            geeks. It contains well written,
            well thought and well explained 
            computer science and programming 
            articles, quizzes and ...
        </div>
        <div>
            A Computer Science portal for 
            geeks. It contains well written,
            well thought and well explained 
            computer science and programming 
            articles, quizzes and ...
        </div>
    </div>
  
    <script type="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>

解释： CSS的overflow属性是用来控制一个HTML元素的内容的行为，这个元素太大，无法放入视口中。我们可以使用overflow: hidden简单地剪辑内容，或者使用overflow: scroll添加一个滚动功能来查看视口中元素的内容，如代码所示。

jQuery ready()方法是用来等待网页加载完毕后再执行其余的javaScript代码。

jQuery的mousemove()方法是用来获取鼠标指针的X和Y坐标的，每当鼠标移动到一个选定的元素上。我们可以使用全局事件对象来获取坐标，如代码中所示。

当用户在选定的HTML元素滚动框中滚动时，jQuery的滚动事件就会发出来。滚动事件适用于所有有相关滚动框的元素，包括窗口对象的文档属性。scroll()方法在一个选定的HTML元素上触发滚动事件，如代码中所示。

jQuery scrollTop()方法是用来返回所选HTML元素滚动框的垂直滚动条位置。这个方法也可以用来设置垂直滚动条的位置。当滚动条在顶部并且用户没有滚动时，其位置为0。在代码中，这个方法被用来计算垂直滚动时鼠标指针的相对位置，即当选定的HTML元素只是垂直滚动（Y-Coordinate）而鼠标指针的水平位置（X-Coordinate）是固定的。在这种情况下，选定的HTML元素有一个水平滚动的关联，那么你可以使用jQuery scrollLeft()方法来计算鼠标指针在水平滚动时的相对位置。为了更好地理解上述概念，请参考输出。