在我的应用程序中,我有一个可以应用于 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
最佳答案
使用 pageX/pageY 而不是 MouseEvent 的 clientX/clientY 属性。它们与页面大小相关,而不是视口(viewport)大小,因此滚动不会影响它们。 Edited app .
关于javascript - 在 angular 2+ 中动态调整元素大小时如何考虑滚动条位置?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58565390/