From 3362466b876724023b1ef9a965cbccb1018d6290 Mon Sep 17 00:00:00 2001 From: Billy Baggerman Date: Thu, 2 Jan 2025 15:17:37 -0500 Subject: [PATCH 1/2] Add instant behavior to synced tab scrolling MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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. 🙂 --- packages/starlight/user-components/Tabs.astro | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/starlight/user-components/Tabs.astro b/packages/starlight/user-components/Tabs.astro index 4234eb0126a..257174e1dbe 100644 --- a/packages/starlight/user-components/Tabs.astro +++ b/packages/starlight/user-components/Tabs.astro @@ -224,6 +224,7 @@ if (isSynced) { StarlightTabs.#syncTabs(this, newTab); window.scrollTo({ top: window.scrollY + (this.getBoundingClientRect().top - previousTabsOffset), + behavior: 'instant', }); } } From 71a6525ecebfc80a8932d6a66f25f47a9a72bc25 Mon Sep 17 00:00:00 2001 From: Chris Swithinbank Date: Mon, 6 Jan 2025 20:13:59 +0100 Subject: [PATCH 2/2] Add changeset --- .changeset/chilly-paws-smell.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/chilly-paws-smell.md diff --git a/.changeset/chilly-paws-smell.md b/.changeset/chilly-paws-smell.md new file mode 100644 index 00000000000..a7f3ea20b54 --- /dev/null +++ b/.changeset/chilly-paws-smell.md @@ -0,0 +1,5 @@ +--- +"@astrojs/starlight": patch +--- + +Ensures `` component toggling is stable when smooth scrolling is enabled via custom CSS