В Angular 8 я хочу иметь возможность остановить прокрутку nativeElement при отпускании мыши

Question

Я использую Angular 8 с машинописью.

Когда я наводю курсор мыши на элемент div, он прокручивается, что работает. Когда я оставляю мышью родительский элемент div, он должен прекратить прокрутку в точке прокрутки в точке.

My HTML:

<div class="container-scroll-area" #scrollMe>
</div>

<div class="scroller-down" (mouseleave)="onMouseLeave($event)">

  <div class="scrollBKWS" (mouseover)="scroll()"></div>

</div>

My TS:

  @ViewChild('scrollMe', { static: false }) private scrollMe: ElementRef;

  public scroll(): void {
    const scrollContainer = thi.scrollMe.nativeElement;
    scrollContainer.scrollTop = scrollContainer.scrollHeight;
  }

  @HostListener('mouseleave', ['$event']) public onMouseLeave(event: any): void { 
    console.log('mouseleave');
    console.log(event);
    console.log(this.scrollMe.nativeElement);

    // event.stopPropagation();
    // event.preventDefault();
  }

Я попробовал прослушиватель хоста, который он нажимает, но, похоже, не может заставить нативный элемент остановить прокрутку.

Answer 1

Вы можете получить nativeelement, используя event.currentTarget, это то же самое, что вы получаете как nativeElement. поэтому ваш код будет выглядеть как

 @ViewChild('scrollMe', { static: false }) private scrollMe: ElementRef;

  public scroll(): void {
    const scrollContainer = thi.scrollMe.nativeElement;
    scrollContainer.scrollTop = scrollContainer.scrollHeight;
  }

  @HostListener('mouseleave', ['$event']) public onMouseLeave(event: any): void { 
    console.log('mouseleave');
    console.log(event);
    console.log(event.currentTarget);
  }