From 722be43842389e0a1f0ad4227243373a8ba5cc71 Mon Sep 17 00:00:00 2001 From: Em Zhan Date: Thu, 17 Apr 2025 23:06:40 -0500 Subject: [PATCH 1/2] Remove no-longer-needed :global --- .../src/routes/docs/[topic]/[...path]/OnThisPage.svelte | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/apps/svelte.dev/src/routes/docs/[topic]/[...path]/OnThisPage.svelte b/apps/svelte.dev/src/routes/docs/[topic]/[...path]/OnThisPage.svelte index 3bad6b262c..40cae248e9 100644 --- a/apps/svelte.dev/src/routes/docs/[topic]/[...path]/OnThisPage.svelte +++ b/apps/svelte.dev/src/routes/docs/[topic]/[...path]/OnThisPage.svelte @@ -89,8 +89,7 @@ @media (max-width: 1199px) { margin: 4rem 0; - /* TODO remove :global once https://github.com/sveltejs/svelte/issues/13779 is fixed */ - :global(&:not(:has(li:nth-child(2)))) { + &:not(:has(li:nth-child(2))) { /* hide widget if there are no subheadings */ display: none; } @@ -165,8 +164,7 @@ rotate: 90deg; } - /* TODO remove :global once https://github.com/sveltejs/svelte/issues/13779 is fixed */ - :global(& + nav) { + & + nav { display: block; } } From 85ecbb267102ab183c377e3cce490c598e462fbf Mon Sep 17 00:00:00 2001 From: Em Zhan Date: Fri, 18 Apr 2025 00:50:32 -0500 Subject: [PATCH 2/2] Make anchor underlines react better to clicks This ensures that the anchor that is clicked is always the one that gets underlined, even if just scrolling to that heading would underline a different anchor. Using `onhashchange` alone instead of adding `onclick`s to each anchor is not sufficient because it's possible to click on an anchor that already has its hash in the URL but has been scrolled away from. --- .../docs/[topic]/[...path]/OnThisPage.svelte | 31 +++++++++++++------ 1 file changed, 21 insertions(+), 10 deletions(-) diff --git a/apps/svelte.dev/src/routes/docs/[topic]/[...path]/OnThisPage.svelte b/apps/svelte.dev/src/routes/docs/[topic]/[...path]/OnThisPage.svelte index 40cae248e9..2515147789 100644 --- a/apps/svelte.dev/src/routes/docs/[topic]/[...path]/OnThisPage.svelte +++ b/apps/svelte.dev/src/routes/docs/[topic]/[...path]/OnThisPage.svelte @@ -6,17 +6,28 @@ let headings: NodeListOf; let current = $state(''); + let locked = $state(false); afterNavigate(() => { - current = location.hash.slice(1); headings = content.querySelectorAll('h2'); - update(); // Ensure active link is set correctly on navigation + for (const heading of headings) { + const anchor = heading.querySelector('a'); + if (anchor) anchor.onclick = onclick; + } + onclick(); }); - // Update function to activate the correct section link - function update() { + function onclick() { + current = location.hash.slice(1); + // avoid onscroll handler from inaccurately updating + locked = true; + setTimeout(() => (locked = false), 100); + } + + function onscroll() { + if (locked) return; + const threshold = (innerHeight * 1) / 3; - let found = false; for (let i = 0; i < headings.length; i++) { const heading = headings[i]; @@ -28,19 +39,18 @@ (!next || next.getBoundingClientRect().top > threshold) ) { current = heading.id; - found = true; break; } } // Handle case when scrolled to the top of the page - if (!found && scrollY === 0) { + if (scrollY === 0) { current = ''; } } - (current = location.hash.slice(1))} /> +