.addEventListener ('scroll', function (e) {...}) в жирную стрелку.Как получить доступ к свойствам в рамках функции?

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

Вам необходимо преобразовать function в arrow function

Просто изменив это

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

Answer 2

Это, вероятно, не лучшее решение, но я взломал что-то вместе, что работает. Вот немного настроек, которые требуются.

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

Переменные ...

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

Init ...

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")
      }
}