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

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

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

视口因我们查看网页的设备而异，例如移动设备、平板电脑或计算机。视口不是实际的 HTML 元素，而是指用户可见并适合可用空间的 HTML 文档。

在视口中，每个元素都与滚动框相关联。文档中内容溢出的每个元素都有一个关联的滚动框。因此，每当用户滚动时，它会影响元素滚动框而不是整个文档。甚至窗口也有一个关联的滚动框，它根据视口而变化。因此，每当我们滚动整个文档时，它只会更改我们在视口中能够看到的任何内容，并且不会对文档或窗口对象本身产生任何影响。

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

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

  npm install -g browser-sync

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

  html

    
  
      
      
      jQuery Mouse Events
      
      
  
    
  
      
    
          Hello GeeksForGeeks
            
          Mouse Coordinates - 
              
          
            
          
            
          
              A Computer Science portal for 
              geeks. It contains well written,
              well thought and well explained 
              computer science and programming 
              articles, quizzes and ...
          
          
              A Computer Science portal for 
              geeks. It contains well written,
              well thought and well explained 
              computer science and programming 
              articles, quizzes and ...
          
      
    
      
          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);
                  }
              });
          });
      
  
    

  说明： CSS溢出属性用于控制太大而无法放入视口的 HTML 元素内容的行为。我们可以简单地使用overflow: hidden overflow: scroll在视口中查看元素的内容，如代码所示。

  jQuery ready()方法用于在执行其余的 javaScript 代码之前等待网页完成加载。

  每当鼠标移到 Selected 元素上时，jQuery mousemove()方法用于获取鼠标指针的 X和Y 坐标。我们可以使用全局事件对象获取坐标，如代码所示。

  当用户在选定的 HTML 元素滚动框中滚动时，将发出 jQuery scroll 事件。 scroll 事件适用于所有具有关联滚动框的元素，包括 window 对象的文档属性。 scroll()方法在选定的 HTML 元素上触发滚动事件，如代码所示。

  jQuery scrollTop()方法用于返回所选 HTML 元素滚动框的垂直滚动条位置。这个方法也可以用来设置垂直滚动条的位置。当滚动条在顶部并且用户没有滚动时，位置为0 。在代码中，该方法用于计算默认滚动上的鼠标指针的相对位置，即当仅垂直滚动（y坐标）和鼠标指针（X坐标）的水平位置是固定的。在这种情况下，选定的 HTML 元素有一个与之关联的水平滚动，那么您也可以使用 jQuery scrollLeft()方法来计算鼠标指针在水平滚动上的相对位置。要更好地理解上述概念，请参阅输出。

• 第 4 步：要使用 Browsersync 启动应用程序，请在项目目录中运行以下命令。

  browser-sync start --server --files "*"

  这将在服务器模式下启动 Browsersync 并监视目录中的所有文件以查看*通配符指定的更改。默认情况下，应用程序将在http://localhost:3000/ 上启动。
  输出：