Angular：滚动至对应ID区块时如何正确定位固定导航栏

我开发的Angular项目里，页面有多个带唯一ID的区块，搭配固定定位导航栏，点击菜单项（如Section2）时，需要让目标区块和导航栏实现如下效果：目标区块顶部刚好对齐到固定导航栏的下方。

我做了示例项目，但暂时有编译问题，注释掉<app-nav></app-nav>才能编译，不过这不是重点，核心需求是解决滚动定位的对齐问题。

项目相关代码片段：

app.routes.ts #

export const routes: Routes = [
  { path: 'section-1', component: Section1Component },
  { path: 'section-2', component: Section2Component },
  { path: 'section-3', component: Section3Component },
  { path: 'section-4', component: Section4Component },
  { path: '**', redirectTo: '' },
];

main.ts #

<div class="container">
  <!-- <app-nav></app-nav> -->
  <app-section1></app-section1>
  <app-section2></app-section2>
  <app-section3></app-section3>
  <app-section4></app-section4>
</div>

nav.component.ts #

export class NavComponent {
  constructor(private viewportScroller: ViewportScroller) {}

  public scrollToSection(sectionId: string): void {
    this.viewportScroller.scrollToAnchor(sectionId);
  }
}

解决方法 #

固定导航栏会挡住目标区块顶部，得调整滚动偏移量来修正位置，三种常用方案：

1. 全局配置固定偏移

在app.module.ts里给ViewportScroller设置固定偏移值（数值等于导航栏实际高度，比如60px）：

import { ViewportScroller } from '@angular/common';

@NgModule({
  // 其他配置项
  providers: [
    {
      provide: ViewportScroller,
      useValue: new ViewportScroller(window, document, {
        scrollOffset: [0, 60] // 第二个参数填导航栏高度
      })
    }
  ]
})
export class AppModule { }

2. 组件内动态计算偏移

如果导航栏高度不固定（比如响应式布局），可以在滚动方法里实时获取导航栏高度：

export class NavComponent {
  constructor(private viewportScroller: ViewportScroller) {}

  public scrollToSection(sectionId: string): void {
    const navBar = document.querySelector('app-nav');
    if (navBar) {
      const navHeight = navBar.getBoundingClientRect().height;
      this.viewportScroller.setOffset([0, navHeight]);
    }
    this.viewportScroller.scrollToAnchor(sectionId);
  }
}

3. CSS修正（备选）

不想改JS逻辑的话，给每个区块加等于导航栏高度的内边距，再用负外边距抵消布局影响：

.section {
  padding-top: 60px; /* 导航栏高度 */
  margin-top: -60px;
}

用以上任意一种方法，点击导航菜单项时，目标区块顶部都会刚好对齐到导航栏下方，符合预期效果。

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