Question

我正在尝试在粗箭头功能范围内访问HTMLElement的属性。我的目标是阅读用户何时滚动到virtualScroll元素的底部。

我有一个函数可以成功地控制虚拟滚动结束的日志，但是我一直努力将其放入Typescript可以使用的变量中。这是工作代码...

let virtualScroll = document.getElementById("virtualScroll")  as HTMLElement;
virtualScroll.addEventListener('scroll', function(e){
  let x: boolean = false;
  if(this.scrollTop + this.clientHeight == this.scrollHeight){
    x = true;
  };
  console.log('virtualScroll END?:  ', x);
  return(x);  // I can't seem to use this either :<
})

但是，由于我对范围在宽箭头功能中的工作方式缺乏了解，使我无法使用“ this.scrollTop”和其他“ this”。属性变量。

virtualScroll.addEventListener('scroll', e => {
  console.log( Object.getPrototypeOf(e).scrollHeight );
})

第二个函数记录的始终是“未定义”，因此很明显我做错了。

Answer 1

这可能不是最好的解决方案，但是我一起破解了一些可行的方法。这是一些必需的设置。

@Component({
  ...
  host: {
    '(window:resize)': 'onResize($event)',
  }
})

变量...

@ViewChild(CdkVirtualScrollViewport)
viewport: CdkVirtualScrollViewport;
topOffset: number = 80;  // A reference to my CSS offset for my <app-bar>.

初始化...

ngOnInit() {
  this.clientHeight = window.innerHeight - this.topOffset;
}

调整事件大小...

onResize(event){
  this.clientHeight = event.target.innerHeight - this.topOffset;
}

最后，该节目的明星获得了虚拟滚动位置！

virtualScrollLocation(){
      if(this.clientHeight + this.viewport.measureScrollOffset("top") == this.viewport.measureRenderedContentSize()){
        console.log("END")
      }
}

Answer 2

您需要将function转换为arrow function

只需更改

virtualScroll.addEventListener('scroll', (e) => {

.addEventListener（'scroll'，function（e）{...}）到Fat Arrow。如何在函数范围内访问属性？

2 个答案: