在设置overflow:auto的嵌套容器中实现锚点跳转问题求助

当锚点元素被包裹在设置了overflow-y: auto的嵌套div内时，使用routerLink配合fragment属性无法触发锚点跳转，移除overflow设置后功能恢复正常。这是因为Angular默认的锚点滚动逻辑仅针对整个文档的滚动容器（document.scrollingElement），不会识别局部的滚动容器，因此无法触发嵌套div的滚动。

以下是两种可行的解决方案：

方法一：自定义指令处理局部容器锚点滚动 #

创建一个通用指令，监听路由变化，自动找到目标锚点所在的滚动容器并触发滚动：

import { Directive, ElementRef, OnInit } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs';

@Directive({
  selector: '[scrollToFragment]',
  standalone: true
})
export class ScrollToFragmentDirective implements OnInit {
  constructor(private el: ElementRef, private router: Router) {}

  ngOnInit(): void {
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe(() => {
      const fragment = this.router.parseUrl(this.router.url).fragment;
      if (!fragment) return;

      const targetElement = document.getElementById(fragment);
      if (!targetElement || !this.el.nativeElement.contains(targetElement)) return;

      // 向上遍历找到最近的滚动容器
      let scrollContainer = targetElement.parentElement;
      while (scrollContainer && scrollContainer !== document.body) {
        const style = window.getComputedStyle(scrollContainer);
        if (style.overflowY === 'auto' || style.overflowY === 'scroll') break;
        scrollContainer = scrollContainer.parentElement;
      }

      if (scrollContainer) {
        scrollContainer.scrollTop = targetElement.offsetTop - scrollContainer.offsetTop;
      }
    });
  }
}

在组件模板中，给滚动容器添加该指令：

<div class="scroll-container" scrollToFragment>
  <!-- 内容省略 -->
  <div id="goto">lorem ipsum to goto</div>
</div>

最后在组件的imports数组中引入ScrollToFragmentDirective即可。

方法二：组件内直接监听路由事件 #

如果不需要通用指令，可在组件中直接处理特定锚点的滚动逻辑：

import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterModule],
  template: `
    <h1>Hello from {{ name }}!</h1>
    <a routerLink="./" fragment="goto"> go to anchor </a>
    <div class="scroll-container">
      <!-- 内容省略 -->
      <div id="goto">lorem ipsum to goto</div>
    </div>
  `,
  styles: `
    .scroll-container { height: 200px; overflow-y: auto; }
    #goto { background: red; }
  `,
})
export class App implements OnInit {
  name = 'Angular';

  constructor(private router: Router) {}

  ngOnInit(): void {
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe(() => {
      const fragment = this.router.parseUrl(this.router.url).fragment;
      if (fragment !== 'goto') return;

      const target = document.getElementById('goto');
      const scrollContainer = document.querySelector('.scroll-container');
      if (target && scrollContainer) {
        (scrollContainer as HTMLElement).scrollTop = target.offsetTop;
      }
    });
  }
}

两种方案的核心逻辑一致：手动定位目标锚点所在的局部滚动容器，通过设置容器的scrollTop属性实现锚点跳转，替代Angular默认的全局滚动逻辑。

内容的提问来源于stack exchange，提问作者Steffen Kämmerer