withInMemoryScrolling in Angular：现代滚动恢复与锚点滚动详解

Source: Dev.to

（请提供您想要翻译的具体文本内容，我将为您翻译成简体中文，同时保持原有的 Markdown 格式和技术术语不变。）

介绍

单页应用（SPA）通过消除完整页面重新加载，从根本上改变了网页导航方式。然而，这一架构转变带来了用户体验的倒退：浏览器失去了在用户前进或后退浏览历史时恢复滚动位置的原生能力。

在传统的多页应用中，浏览器会自动记住你在页面上的滚动位置，并在点击返回按钮时将你带回到那个精确的位置。SPA 打破了这种行为。

Angular 的 withInMemoryScrolling 路由器特性通过让路由器在导航期间控制滚动行为来弥补这一缺口。它为两个关键的滚动相关功能提供了声明式配置：

• 跨路由更改的滚动位置恢复。
• 基于片段的锚点滚动。

为什么你应该在意

如果你的应用经常在路由之间切换，并且用户期望直观的滚动行为——比如内容丰富的网站、电子商务的列表‑详情页面、带有标签页的仪表盘，或任何通过保留导航上下文来提升可用性的应用——此功能是必不可少的。

Source:

什么是 withInMemoryScrolling？

withInMemoryScrolling 是在 Angular 的独立 API 时代引入的路由特性函数。它使路由能够在导航事件期间管理滚动行为。 “内存中” 的称谓指的是 Angular 如何存储滚动位置：它在内存中维护一个以导航状态为键的滚动位置映射，而不是依赖浏览器原生机制。

工作原理

1. 导航开始 – 路由捕获当前的滚动位置。
2. 导航结束 – 根据配置，路由决定：
   • 恢复之前的位置，
   • 滚动到顶部，
   • 滚动到锚点（fragment），或
   • 保持滚动不变。

决定取决于 scrollPositionRestoration、anchorScrolling 等选项，以及导航上下文（前进导航、后退导航、路由重新加载等）。

浏览器默认滚动 vs. Angular 路由控制的滚动

设置（独立 API）

基本配置

import { ApplicationConfig } from '@angular/core';
import { provideRouter, withInMemoryScrolling } from '@angular/router';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(
      routes,
      withInMemoryScrolling({
        scrollPositionRestoration: 'enabled', // or 'disabled' | 'top'
        anchorScrolling: 'enabled'            // or 'disabled'
      })
    )
  ]
};

独立引导方式

import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter, withInMemoryScrolling } from '@angular/router';
import { AppComponent } from './app/app.component';
import { routes } from './app/app.routes';

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(
      routes,
      withInMemoryScrolling({
        scrollPositionRestoration: 'enabled',
        anchorScrolling: 'enabled'
      })
    )
  ]
});

Configuration Options

scrollPositionRestoration values

Example: Disable scroll restoration

withInMemoryScrolling({
  scrollPositionRestoration: 'disabled'
});

Example: Enable scroll restoration

withInMemoryScrolling({
  scrollPositionRestoration: 'enabled'
});

锚点滚动

当 anchorScrolling 设置为 'enabled' 时，路由器会自动滚动到其 id 与 URL 片段（例如 #section-2）匹配的元素。这与 scrollPositionRestoration 配合使用——如果你返回到包含片段的 URL，路由器会先恢复已保存的滚动位置，然后在需要时滚动到锚点。

withInMemoryScrolling({
  scrollPositionRestoration: 'enabled',
  anchorScrolling: 'enabled'
});

完整文章与演示

• 阅读完整文章 – 深入探讨内部实现、边缘情况和性能考量。
• 探索实时演示 – 查看该功能在不同配置组合下的实际运行。
• 获取完整源代码 – 克隆、实验并适配到自己的项目中。

完整文章 →
实时演示 →
GitHub 仓库 →

加入讨论

• 这篇文章是否激发了新想法或解决了实际问题？ 请告诉我！
• 已经在使用这项技术了吗？ 分享你的经验。
• 有疑问、顾虑或自己的改进方法吗？ 在评论中留下吧——让我们一起学习！

传播此信息

如果本指南为您的开发之旅增添了价值：

• 分享 给您的团队、技术朋友或社区——您永远不知道谁现在正需要它。
• 保存 以备将来参考。

祝编码愉快！ 🚀

快速参考与资源

我定期分享实战教程、洁净代码技巧、可扩展的前端架构以及真实场景的问题解决指南。

🎉 如果您觉得本文有价值

• 留下 👏 鼓掌
• 留下 💬 评论
• 点击 🔔 关注 获取更多每周前端洞见

让我们一起构建更简洁、更快速、更智能的网页应用 — 共同前行。

敬请期待更多 Angular 技巧、模式和性能技巧！🧪🧠🚀

✨ 分享您的想法 → 📣 设置通知偏好