3

Using scrollPositionRestoration: 'enabled' for the RouterModule is really a nice feature but how to disable the scroll animation / smooth scrolling so it snaps to the position?

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      scrollPositionRestoration: 'enabled',
    }),
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {
}

Background: Having smooth scrolling does not feel like navigating a "normal" website because normally if navigating back and forth there is no smooth scrolling.

5
  • Can you recreate the problem in a stackblitz? When I set up two vanilla pages the scroll position is set immediately - no smooth scrolling. stackblitz.com/edit/angular-ivy-h6sqt7?file=src/app/…. Is there maybe something else interfering with the scrolling in your app? Oct 21, 2021 at 13:24
  • Which browser are you using? I am on Chrome
    – Mick
    Oct 22, 2021 at 10:36
  • I'm using Firefox, but I also see the same instant scroll behaviour in my stackblitz in Chrome 95. Actually... I say instant, but there is a slight flicker when using the back button. But I'm still not seeing a smooth scroll. Oct 22, 2021 at 12:14
  • 2
    Maybe you have scroll-behavior: smooth somewhere in css Oct 26, 2021 at 13:18

3 Answers 3

10

The issue wasn't Angular, instead Bootstrap has set CSS smooth-scrolling to smooth.

Disabled it by $enable-smooth-scroll: false;

4
  • Noticed this when upgrading from Angular 11 to 13 and Bootstrap 4 to 5. First, I wasn't sure which was at "fault", but it was Bootstrap indeed.
    – andreas
    Feb 18, 2022 at 22:54
  • this saved a lot of time checking Angular, because I would have expected to find the problem there. Thanks
    – DutchKevv
    Dec 5, 2022 at 20:25
  • Echoing what @DutchKevv said - thanks for saving us the time and headache.
    – El-Mo
    Apr 11, 2023 at 5:43
  • tks, spent hours before finding your suggestion. works great
    – guillim
    Dec 15, 2023 at 9:31
4

I was having the same problem. I tried using Mick's solution of changing the variable in bootstrap's "scss/_variables.scss" file but it didn't work out for me (Plus since it was in the node_modules which we don't share while the code is committed, any changes there wouldn't do any good as well, I guess). So I tried overwriting it in styles.css as:-

html {
  scroll-behavior: auto !important;
}

And it worked for me. I was having multiple CSS files in the global context for the project and maybe that's why the bootstrap variable change didn't work for me because other files may have interfered as well.

0

There is an open issue at Angular's github about scrollPositionRestoration

I tried to make an alternative, I hope it helps you:

https://stackblitz.com/edit/angular-ivy-jxm1mu?file=src%2Fapp%2Fapp.module.ts

I couldn't reproduce the navigate back behaviour with stackblitz because the app reloads.

When the user scrolls, save the scroll Y position and then, when the router emits the scrolling event, you make it not smooth.

window.scrollTo doc says that there is a value behavior: instant, I used auto because linter marked it as a error, so maybe it is not widely supported.

4
  • 1
    You can trigger back button-style navigation in stackblitz with window.history.go(-1); Oct 22, 2021 at 12:16
  • The Github Issue is not related to my question. The restoration is working fine for me, just the animation is annoying.
    – Mick
    Oct 23, 2021 at 14:18
  • @Mick have you tried setting the scrollTo behavior property?
    – adrisons
    Oct 23, 2021 at 17:09
  • Where should I set this? Angular is using ViewportScroller
    – Mick
    Oct 26, 2021 at 9:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.