Angular中如何获取class为dropdown的元素的固定顶部偏移量

Element.getBoundingClientRect().top 返回的是元素相对于浏览器可视视口顶部的距离，页面滚动时视口相对文档的位置发生变化，因此数值会随滚动改变。而jQuery的$(".dropdown").offset().top返回的是元素相对于整个文档顶部的固定距离，不受滚动行为影响。

要在Angular中得到和jQueryoffset().top一致的结果，只需要在getBoundingClientRect().top的基础上叠加当前页面的垂直滚动距离即可，具体实现如下：

• 基础实现代码

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-demo',
  template: `<div #dropdown class="dropdown">目标元素</div>`
})
export class DemoComponent implements AfterViewInit {
  // 通过ViewChild绑定目标元素
  @ViewChild('dropdown') dropdown!: ElementRef<HTMLElement>;

  ngAfterViewInit(): void {
    // 元素渲染完成后获取偏移量
    const fixedOffsetTop = this.getDocumentOffsetTop(this.dropdown.nativeElement);
    console.log(fixedOffsetTop); // 数值和jQuery offset().top完全一致
  }

  /**
   * 获取元素相对于文档顶部的固定偏移量
   * @param element 目标DOM元素
   * @returns 偏移量数值（单位px）
   */
  private getDocumentOffsetTop(element: HTMLElement): number {
    // 元素相对视口距离 + 页面垂直滚动距离 = 相对文档顶部的固定距离
    return element.getBoundingClientRect().top + window.scrollY;
  }
}

• 兼容适配：如果需要兼容低版本IE浏览器，可以将window.scrollY替换为等价的window.pageYOffset，二者在现代浏览器中表现完全一致。
• 注意事项：必须等元素完成渲染后再调用偏移量计算方法，推荐在ngAfterViewInit生命周期钩子中执行，如果元素是动态渲染/修改的，需要在元素更新完成后再重新计算数值。

内容的提问来源于stack exchange，提问作者Abdur Raziq Khan