Bootstrap-Turbo Scroll Issue

1

Hey all, I have been having an issue with an interaction between turbo and bootstrap5. When bootstrap scss is enabled, the scroll-position when entering a new link is different than expected.

  • Expected behavior: entering a new internal link will go to the top of that new link’s page.
  • Actual behavior: entering a new internal link does not change the scroll position for that page.

For more in-depth information including a replication of the issue in a git repo, see here

Thank you for any suggestions or help

2

Bootstrap 5 sets the scroll-behavior as smooth

@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }
}

As one solution, you can disable smooth-scroll in the application.scss:

$enable-smooth-scroll: false;
@import "bootstrap";

see also: conflict enable-smooth-scroll in bootstrap 5 · Issue #34337 · twbs/bootstrap · GitHub

1 Like
3

Thank you so much! That was a really frustrating problem! My previous attempt at fixing this was with messing with scroll positions via javascript in-between page loads and renders etc. :man_facepalming: