html - 如何检查用户是否已向下滚动(或交叉)到 Angular7 中的特定元素(基于 id)？

Question

如何检查用户是否已向下滚动(或交叉)到浏览器中的特定元素(基于 id)，以便我可以检查条件并在 Angular 7 中动态分配类名称？

Answer 1

基本上，您可以使用 Angular 监听窗口滚动事件 HostListener使用像这样的 window:scroll 事件:

@HostListener('window:scroll', ['$event'])
onWindowScroll() {
  // handle scrolling event here
}

Available StackBlitz Example for the explanation below

ScrolledTo 指令

在这种情况下，为了获得最大的灵活性，我要做的是创建一个指令来应用于任何会公开两种状态的 HTML 元素:

• 已到达:当滚动位置已到达应用指令的元素的顶部时true
• passed:当滚动位置超过应用指令的元素高度时true

import { Directive, ElementRef, HostListener } from '@angular/core';

@Directive({
  selector: '[scrolledTo]',
  exportAs: 'scrolledTo', // allows directive to be targeted by a template reference variable
})
export class ScrolledToDirective {
  reached = false;
  passed = false;

  constructor(public el: ElementRef) { }

  @HostListener('window:scroll', ['$event'])
  onWindowScroll() {
    const elementPosition = this.el.nativeElement.offsetTop;
    const elementHeight = this.el.nativeElement.clientHeight;
    const scrollPosition = window.pageYOffset;

    // set `true` when scrolling has reached current element
    this.reached = scrollPosition >= elementPosition;

    // set `true` when scrolling has passed current element height
    this.passed = scrollPosition >= (elementPosition + elementHeight);
  }
}

分配 CSS 类

使用 Template Reference Variable然后，您将能够在 HTML 代码中检索指定指令导出 #myTemplateRef="scrolledTo" 的状态，并根据返回的值根据需要应用 CSS 类。

<div scrolledTo #scrolledToElement="scrolledTo">
  <!-- whatever HTML content -->
</div>

<div
  [class.reached]="scrolledToElement.reached"
  [class.passed]="scrolledToElement.passed">
  <!-- whatever HTML content -->
</div>

这样，您就可以在其他 HTML 元素或监视元素本身上分配类......几乎可以根据您的需要来分配类!

希望对你有帮助!