Skip to content

Commit

Permalink
Add instant behavior to synced tab scrolling
Browse files Browse the repository at this point in the history
This forces the scroll behavior to be instant whenever clicking a synced tab triggers a window scroll, which fixes the odd "smooth scroll jump" on Starlight sites which use `html { scroll-behavior: smooth; }` in their global CSS. This provides a nicer UX on sites which use smooth scrolling, where e.g. clicking an item in the ToC smooth scrolls to that section on the page, but clicking a new synced tab doesn't cause an awkward jump as it scrolls to the new tab's position. It should be a non-breaking change to existing Starlight sites since the default scroll behavior of the window is already instant. 🙂
  • Loading branch information
bbag authored Jan 2, 2025
1 parent 29cdb81 commit 3362466
Showing 1 changed file with 1 addition and 0 deletions.
1 change: 1 addition & 0 deletions packages/starlight/user-components/Tabs.astro
Original file line number Diff line number Diff line change
Expand Up @@ -224,6 +224,7 @@ if (isSynced) {
StarlightTabs.#syncTabs(this, newTab);
window.scrollTo({
top: window.scrollY + (this.getBoundingClientRect().top - previousTabsOffset),
behavior: 'instant',
});
}
}
Expand Down

0 comments on commit 3362466

Please sign in to comment.