javascript - Angular 9在单个元素滚动上添加类

Question

我需要将类添加到单个元素滚动上的元素。我创建了一个 Slackblitz 示例。我知道如何在全身滚动上添加一个类。但是，我需要添加特定的元素滚动。在此示例中，我需要添加有关滚动 div#paragraph 的类。

提前致谢。

https://stackblitz.com/edit/angular-changeclassonelementscroll

Answer 1

您可以创建一个指令来监听其主机滚动事件。类似的东西会起作用:

@Directive({
  selector: '[appScroll]'
})
export class ScrollDirective {

  @Input() scrollClass: string;

  constructor(private el: ElementRef, private renderer: Renderer2) { }

  @HostListener("scroll", [])
  onScroll() {
    if (this.el.nativeElement.scrollTop > 20) {
      this.renderer.addClass(this.el.nativeElement, this.scrollClass)
    }
  }

}

我 fork 了你的代码示例 here

PS:尽量避免使用document.getElementById直接访问DOM。为此始终使用 Angular 实用程序。