Angular 14中如何检测元素ID是否在视口内并触发变量

方法一：使用Intersection Observer API（推荐） #

这是浏览器原生的高性能API，专门用于检测元素是否进入/离开视口，相比滚动监听能减少不必要的计算，避免性能损耗。

步骤1：创建自定义指令

在Angular项目中生成一个指令，封装视口检测逻辑：

import { Directive, ElementRef, Output, EventEmitter, OnInit, OnDestroy } from '@angular/core';

@Directive({
  selector: '[appViewportDetection]'
})
export class ViewportDetectionDirective implements OnInit, OnDestroy {
  @Output() viewportEnter = new EventEmitter<string>();
  @Output() viewportLeave = new EventEmitter<string>();
  private observer: IntersectionObserver | undefined;

  constructor(private el: ElementRef) {}

  ngOnInit(): void {
    // 配置观察者选项：可自定义rootMargin、触发阈值等
    const options = {
      root: null, // 以浏览器视口为根容器
      rootMargin: '0px',
      threshold: 0.1 // 元素10%进入视口时触发回调
    };

    this.observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        const elementId = this.el.nativeElement.id;
        if (entry.isIntersecting) {
          this.viewportEnter.emit(elementId);
        } else {
          this.viewportLeave.emit(elementId);
        }
      });
    }, options);

    this.observer.observe(this.el.nativeElement);
  }

  ngOnDestroy(): void {
    // 销毁观察者，避免内存泄漏
    this.observer?.disconnect();
  }
}

步骤2：在组件中使用指令并绑定变量

组件模板中给目标元素添加指令，绑定视口进入/离开事件：

<div id="section1" appViewportDetection 
     (viewportEnter)="updateVisibleId($event)" 
     (viewportLeave)="clearVisibleId($event)">
  第一部分内容
</div>
<div id="section2" appViewportDetection 
     (viewportEnter)="updateVisibleId($event)" 
     (viewportLeave)="clearVisibleId($event)">
  第二部分内容
</div>
<div id="section3" appViewportDetection 
     (viewportEnter)="updateVisibleId($event)" 
     (viewportLeave)="clearVisibleId($event)">
  第三部分内容
</div>

组件类中定义变量并实现事件处理逻辑：

import { Component } from '@angular/core';

@Component({
  selector: 'app-viewport-test',
  templateUrl: './viewport-test.component.html',
  styleUrls: ['./viewport-test.component.css']
})
export class ViewportTestComponent {
  currentVisibleId: string | null = null;

  updateVisibleId(elementId: string): void {
    this.currentVisibleId = elementId;
    // 这里可添加额外业务逻辑，比如加载对应数据、更新页面状态等
  }

  clearVisibleId(elementId: string): void {
    if (this.currentVisibleId === elementId) {
      this.currentVisibleId = null;
    }
  }
}

方法二：传统滚动监听（备选） #

如果需要兼容极少数不支持Intersection Observer的环境，可使用滚动监听结合getBoundingClientRect()实现：

组件中实现逻辑

import { Component, OnInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-viewport-test',
  templateUrl: './viewport-test.component.html'
})
export class ViewportTestComponent implements OnInit, OnDestroy {
  currentVisibleId: string | null = null;
  private scrollListener: (() => void) | undefined;

  ngOnInit(): void {
    // 添加防抖处理，避免滚动时频繁触发计算
    this.scrollListener = this.debounce(() => this.checkElementsInViewport(), 100);
    window.addEventListener('scroll', this.scrollListener);
    // 初始化时检测一次当前可见元素
    this.checkElementsInViewport();
  }

  ngOnDestroy(): void {
    window.removeEventListener('scroll', this.scrollListener!);
  }

  private checkElementsInViewport(): void {
    const elements = document.querySelectorAll('[data-viewport-check]');
    let visibleId: string | null = null;

    elements.forEach(el => {
      const rect = el.getBoundingClientRect();
      // 判断元素是否部分或完全处于视口内
      const isVisible = rect.top < window.innerHeight && rect.bottom > 0;
      if (isVisible) {
        visibleId = (el as HTMLElement).id;
      }
    });

    this.currentVisibleId = visibleId;
  }

  // 防抖工具函数
  private debounce(func: () => void, delay: number): () => void {
    let timeoutId: number | undefined;
    return () => {
      clearTimeout(timeoutId);
      timeoutId = setTimeout(func, delay);
    };
  }
}

模板中给元素添加检测标识：

<div id="section1" data-viewport-check>第一部分内容</div>
<div id="section2" data-viewport-check>第二部分内容</div>
<div id="section3" data-viewport-check>第三部分内容</div>

注意事项 #

• 使用Intersection Observer时，务必在组件/指令销毁时调用disconnect()，防止内存泄漏。
• 可根据业务需求调整Intersection Observer的threshold和rootMargin参数，精准控制触发时机。
• 滚动监听方式必须添加防抖处理，否则会导致页面频繁计算引发卡顿。

内容的提问来源于stack exchange，提问作者Baron99