javascript - 在 angular 2+ 中动态调整元素大小时如何考虑滚动条位置?

标签 javascript css angular scrollbar

在我的应用程序中,我有一个可以应用于 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/

相关文章:

javascript - Highcharts 服务器端图像生成,如何在回调参数中设置图例 labelFormatter

html - 一行文本/段落中的图像

http - Angular2 - 如何在组件中链接异步服务调用(http 请求)?

Angular2 ng-bootstrap : Reuse modal template with different data

angular - 类型 'number' 不可分配给类型 '(...items: any[]) => number'

javascript - 如何清除 Visualforce 页面中的查找字段值?

javascript - 如何在 socket.io 2.0.3 中获取客户端 ip 地址?

javascript - Vue.js 模板和插值 - 不渲染数据

html - 如何修复平板电脑上 Bootstrap 导航栏的宽度

css - 我可以将外部样式表包含到 php 文件中吗?如果是,如何?