滚动时更新鼠标 position

Question

我正在尝试查找相对于整个文档的最新更新的当前鼠标 position。 我已经设置了一个滚动事件。

由于此事件不包含鼠标位置，因此我在此滚动事件中嵌套了另一个mousemove事件侦听器。

尽管如此，我面临的问题是，如果用户将指针保持在同一个 position 并简单地用滚轮滚动，那么除非我移动鼠标，否则最新的 position 不会更新。

我应该怎么办？ 我可以用什么来检测鼠标position？ 我想要最简单的答案，因为我正在学习 css 和 js。

这是我的代码：

 document.addEventListener('scroll', (e) => { document.addEventListener('mousemove', (e1) => { total_scroll = window.scrollY + e1.clientY; console.log("Current Pos: " + total_scroll); }) })

 body { height: 2000px; }

Answer 1

我认为最好的解决方案是分离这些侦听器，并使用当前鼠标 position 不断更新一些变量，然后在滚动时使用该变量。

我之前的答案不正确，所以我再给一个：

<html lang="en">

<head>
  <title>Document</title>
  <style>
    body {
      height: 2000px;
    }
  </style>
</head>

<body>
  <script>
    let clientScrollY = 0;
    document.addEventListener('mousemove', (e1) => {
      clientScrollY = e1.clientY;
    })
    document.addEventListener('scroll', (e) => {
      total_scroll = window.scrollY + clientScrollY;
      console.log("Current Pos: " + total_scroll);
    })
    
  </script>
</body>

</html>

如果您想更新 onscroll 和 onmousemove，这里也是解决方案。

<html lang="en">

<head>
  <title>Document</title>
  <style>
    body {
      height: 2000px;
    }
  </style>
</head>

<body>
  <script>
    let clientScrollY = 0;
    let totalScrollY = 0;
    
    function updateTotalScrollY(){
      totalScrollY = window.scrollY + clientScrollY;
      console.log(totalScrollY);
    }
    
    document.addEventListener('mousemove', (e1) => {
      clientScrollY = e1.clientY;
      updateTotalScrollY();
    })
    document.addEventListener('scroll', (e) => {
      updateTotalScrollY();
    })
  </script>
</body>

</html>

滚动时更新鼠标 position

问题描述

1 个解决方案

解决方案1
1 2021-06-11 14:15:17

滚动时更新鼠标 position

问题描述

1 个解决方案

解决方案1 1 2021-06-11 14:15:17

解决方案1
1 2021-06-11 14:15:17