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

Question

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

 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。

标签： angularscrollkeydownmousemovemouse-position