角度垂直路由器链接滚动与页面水平溢出发生冲突。有什么解决办法吗？

Question

我正在使用 Angular 17，希望在单击 routerLink 后实现滚动到页面顶部。在app.config.ts中实现provideRouter的经典scrollPositionRestoration并进行一些挖掘后，我发现body的overflow-x:hidden与scrollPositionRestoration背后的一些功能发生冲突，并且它的工作方式就像一个魅力。但问题是我不想摆脱主体的溢出x：隐藏，因为这样角度网络应用程序会在移动设备上左右移动。是否有任何解决方法可以保持overflow-x：隐藏主体并使scrollPositionRestoration工作？ （两全其美的情况）？

我的 Angular 17 app.config.ts：

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(
      routes,
      withInMemoryScrolling({
        scrollPositionRestoration: 'enabled',
      }),
      withViewTransitions()
    ),
    provideClientHydration(),
    provideHttpClient(withFetch()),
    importProvidersFrom([
      BrowserModule,
      BrowserAnimationsModule,
      NoopAnimationsModule,
      provideFirebaseApp(() => initializeApp(environment.firebaseConfig)),
      provideAnalytics(() => getAnalytics()),
    ]),
  ],
};

我还尝试了“顶部”而不是“启用”。 我的 styles.css 片段：

html,
body {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: var(--main-light-color);
    font-family: var(--primary-font);
    scroll-behavior: smooth;
    scrollbar-width: none;
    width: auto !important;
    overflow-x: hidden;
}

这两者发生碰撞，如上所述。

Answer 1

更新：overflow-x：剪辑；解决了问题