时间戳

首页 > 解决方案 > 如何检查用户是否向下滚动（或交叉）到 Angular7 中的特定元素（基于 id）？

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

问题描述

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

标签： htmlcsstypescriptangular7

解决方案

基本上，您可以使用带有如下事件的HostListener通过Angular 监听窗口滚动事件window:scroll：

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

可用的StackBlitz 示例，用于以下说明

ScrolledTo 指令

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

  • 到达：true当滚动位置到达应用指令的元素的顶部时
  • 已通过：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 类

使用模板引用变量，您将能够检索那些#myTemplateRef="scrolledTo"在您的 HTML 代码中指定指令导出的状态，并根据返回值应用您希望的 CSS 类。

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

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

这样，您就可以在其他 HTML 元素或被监视的元素本身上分配类……几乎可以根据您的需要进行分配！

希望能帮助到你！

推荐阅读