滚动中丢失元素的鼠标位置

问题描述

我有一个根据命令出现和消失的元素。我将它设置为在被调用时使用鼠标的当前位置以显示在鼠标旁边。我通过为 mousemove 设置 HostListeners 并在调用时将其附加到元素 left 和 top 样式来使用它：

 public mousePosition = {x:0,y:0};
  @HostListener('mousemove',['$event'])
  mouseMove($event: MouseEvent) { 
    this.mousePosition.x = $event.clientX;
    this.mousePosition.y = $event.clientY;
  }

  @HostListener('window:keydown.alt.a') toolbarEvent() {
    let cursor = document.getElementById('cursor');
    cursor.style.left = this.mousePosition.x + "px";
    cursor.style.top = this.mousePosition.y + "px";
  }

然而，我的问题是在滚动时，它似乎停留在原始页面设置坐标上，并且在滚动时不会重新设置。我读过偏移量，但我无法让它正常工作，因为我唯一能够调用的偏移量是鼠标移动。

这是我遇到的问题的 Stackblitz： https://stackblitz.com/edit/angular-ivy-rjdt1w?file=src/app/app.component.ts 我做了它，所以它是一个简单的跟随鼠标，正如你所看到的，一旦你向下滚动，元素就会停止在垂直位置并且不会继续。

Edit1* 在底部添加了 StackBlitz 示例。

Edit2* 我试图创建一个跟随 Window.PageYoffset 的偏移量，然后根据我滚动的位置简单地减去或添加，但是，它仍然很笨拙，我不确定我缺少什么。更新了 Stackblitz

Edit3* 想通了，是在缓存中添加和减去，而不是使用实际的新值。使用更好的函数，如 Requestanimationframe 和 Transform。使用正确的代码更新了 Stackblitz。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）