Angular vertical routerLink scrolling collides with horizontal overflow of page. Are there any workarounds?

Question

I am using Angular 17 and want to implement scrolling to the top of the page after clicking a routerLink. After implementing the classic scrollPositionRestoration of the provideRouter in app.config.ts and doing some digging, I found out that overflow-x: hidden of the body collides with some functionality behind scrollPositionRestoration and it worked like a charm. But the problem is that I don't want to get rid of the overflow-x: hidden of the body, because then the angular web app moves left and right on mobile. Are there any workarounds in order to keep overflow-x: hidden of the body and to make scrollPositionRestoration work? (best of both worlds case)?

My 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()),
    ]),
  ],
};

I also tried 'top' instead of 'enabled'. My styles.css snippet:

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;
}

These two collide, as mentioned above.

Answer 1

Update: overflow-x: clip; solved the issue