Add instant behavior to synced tab scrolling #2747
Conversation
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. 🙂
🦋 Changeset detectedLatest commit: 7128ed6 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
✅ Deploy Preview for astro-starlight ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
Hello! Thank you for opening your first PR to Starlight! ✨ Here’s what will happen next:
|
There was a problem hiding this comment.
Thanks for the PR @bbag! I think this change is fair. There’s no easy way for someone to fix this on their end if using smooth scrolling. We did evaluate smooth scrolling for stuff as a default and felt it can actually slow down the docs UX, so decided against it, but I think guaranteeing this behaviour works as expected even when someone has opted in to smooth scrolling makes sense 👍
|
@delucis Awesome, I appreciate it! I'm building my company's docs site with Starlight as we speak and loving it, and this little tweak will come in clutch for us (and hopefully others in the future as well). 🙂 The Astro team is next level, thanks for everything y'all do. 🚀 |
Description
Closes: Smooth scrolling on window causes synced tab positions to jump #2746
What does this PR change? Give us a brief description.
This ensures the scroll behavior will be instant as expected 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 is already instant. 🙂Did you change something visual? A before/after screenshot can be helpful.
Nope, just a tiny quality-of-life improvement for tabs on pages which use smooth scrolling!