javascript - 在角度 2+ 中动态调整元素大小时，您如何考虑滚动条的位置？

Question

在我的应用程序中，我有一个指令可以应用于允许它们调整大小的 div。但是，如果滚动条完全移动，我将无法再次调整大小，除非滚动条回到顶部。我知道一种跟踪滚动条位置的方法，但不确定在哪里应用它。这是我跟踪滚动位置的地方

public last_known_scroll_position = 0;

@HostListener('window:scroll', ['$event']) 
trackScrollBarPos() {
  this.last_known_scroll_position = window.pageYOffset;
}

private inDragRegion(evt: MouseEvent) {
  this.trackScrollBarPos();
  if(this.orientation == "horizontal"){
    return this.el.nativeElement.clientWidth - evt.clientX + this.el.nativeElement.offsetLeft < this.resizableGrabWidth;
  }else if(this.orientation == "vertical"){
   return this.el.nativeElement.clientHeight - evt.clientY + 

  this.el.nativeElement.offsetTop < this.resizableGrabHeight;
  }
}

我应该把最后一个已知的滚动条位置放在我的等式中，还是我要解决这个问题？如果没有滚动条，应用程序再次运行良好。

有关完整代码，请参见下面的 stackblitz https://stackblitz.com/edit/angular-zq5adw

标签： javascriptcssangularscrollbar

Answer 1

使用 pageX/pageY 而不是 MouseEvent 的 clientX/clientY 属性。它们是相对于页面大小而不是视口大小的，因此滚动不会影响它们。编辑的应用程序。