spartacus-storefront 3.2.0下scrollPositionRestoration不生效咨询

配置失效的核心原因 #

• 3.2版本会在应用启动阶段完全替换掉AppRoutingModule中RouterModule.forRoot传入的路由参数，这也是直接在路由模块中配置scrollPositionRestoration、scrollOffset参数不生效的根本原因
• 版本内置的全局路由配置默认将scrollPositionRestoration设置为'disabled'，普通方式下编写的同令牌自定义provider，会因为注入加载顺序的问题，被Spartacus内置的默认配置覆盖，导致自定义参数不生效
• 默认布局的主滚动容器并非浏览器原生window对象，而是绑定在cx-storefront自定义元素上，Angular原生路由滚动服务默认监听window滚动事件，会进一步导致滚动位置重置逻辑无法触发

实操解决步骤 #

• 通过Spartacus专属全局配置入口写入路由参数，不要直接覆盖原生Angular的ROUTER_CONFIGURATION令牌
  在主应用模块引入B2cStorefrontModule的配置块中追加路由全局配置项，Spartacus的配置加载逻辑会将这部分参数合并为最终生效的路由配置，不存在被内部默认值覆盖的问题：

  // app.module.ts
  B2cStorefrontModule.withConfig({
    // 保留原有全局配置如backend、context等
    routing: {
      scrollPositionRestoration: 'top',
      scrollOffset: [0, 0]
    }
  })
  

• 若需手动编写ROUTER_CONFIGURATION提供逻辑，必须采用配置合并而非直接覆盖的实现方式
  直接用useValue传入配置值的写法，会因为注入顺序在Spartacus默认配置加载之前执行，最终被默认值覆盖。正确的写法需要注入已存在的路由配置，在原有配置基础上追加需要修改的参数：

  providers: [
    {
      provide: ROUTER_CONFIGURATION,
      useFactory: (existingConfig: Record<string, unknown>) => {
        return {
          ...existingConfig,
          scrollPositionRestoration: 'top',
          scrollOffset: [0, 0]
        }
      },
      deps: [[new Optional(), new SkipSelf(), ROUTER_CONFIGURATION]]
    }
  ]
  

• 上述配置完成后仍不生效时，需适配自定义滚动容器
  针对滚动事件绑定在cx-storefront元素的场景，需要为Angular的ViewportScroller服务提供自定义实现，在路由切换完成后手动调用目标滚动容器的scrollTo(0, 0)方法完成位置置顶，弥补原生视口滚动服务不识别非window滚动容器的缺陷。

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