Smooth scrolling on window causes synced tab positions to jump

[bbag]

What version of starlight are you using?

0.30.3

What version of astro are you using?

5.0.2

What package manager are you using?

npm

What operating system are you using?

Windows

What browser are you using?

Firefox, Chrome

Describe the Bug

If a site author adds html { scroll-behavior: smooth; } to the site's CSS, it enables smooth scrolling across the docs which can make for a nice UX when e.g. users click items in the Table of Contents to jump to sections on a long page. However, this also causes synced tabs to awkwardly "jump" with a smooth scroll effect when a new tab is clicked and it tries to maintain the position of that tab on the page (only noticeable when the <TabItem>s have different content height).

Ideally, the page should scroll instantly (i.e. have no visible transition or "jump") when a new synced tab is clicked so that the tabs appear to stay in the same position for the user (which the current implementation does if the document's scroll behavior is still instant by default), but still allow for smooth scrolling behavior on the rest of the document itself.

I believe the fix may be to just add behavior: 'instant' to the window.scrollTo() options when a tab is clicked and should sync (in Tabs.astro, within the switchTab() method):

window.scrollTo({
	top: window.scrollY + (this.getBoundingClientRect().top - previousTabsOffset),
	behavior: 'instant',
});

I think this should also be non-breaking to existing Starlight sites, since the default scroll behavior of the page is already instant. In other words, this is a little quality-of-life improvement/progressive enhancement that will only help sites that use smooth scrolling.

Thanks Astro & Starlight team for everything you do, these tools are a delight and y'all are amazing. 🙂

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-ts98zrmf

Participation

• I am willing to submit a pull request for this issue.