quartz-community/explorer
1
0
Fork 0
mirror of https://github.com/quartz-community/explorer.git synced 2026-07-22 02:50:24 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: scroll only the explorer container, not the whole window

Browse source 
On page load the explorer reveals the active item with
`activeElement.scrollIntoView({ behavior: "smooth" })`. `scrollIntoView`
scrolls *every* scrollable ancestor, including the document, so when SPA
routing is disabled (each navigation is a full page load) the window gets
dragged down to wherever the active item sits in the sidebar — the reader
lands partway down the new page instead of at the top.

Use `explorerUl.scrollTo(...)`, which only moves the explorer's own scroll
container, to center the active item without ever scrolling the window.
The smooth animation is preserved.
This commit is contained in:
Narath Carlile 2026-07-09 11:50:23 -04:00
parent a2dfd1373a
commit fd4fb4c52b
1 changed files with 17 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/components/scripts/explorer.inline.ts
View file

@ -294,7 +294,23 @@ async function handleNavOrRender(e) {
} else {
const activeElement = explorerUl.querySelector(".active");
if (activeElement) {
activeElement.scrollIntoView({ behavior: "smooth" });
// Scroll only the explorer's own container to reveal the active item.
// `scrollIntoView` scrolls every scrollable ancestor (including the
// document/window); with SPA disabled, each full page load then drags
// the whole page down to wherever the active item sits, so the reader
// lands partway down the page instead of at the top. `Element.scrollTo`
// moves this container alone and never touches the window.
const containerRect = explorerUl.getBoundingClientRect();
const activeRect = activeElement.getBoundingClientRect();
explorerUl.scrollTo({
top:
explorerUl.scrollTop +
activeRect.top -
containerRect.top -
explorerUl.clientHeight / 2 +
activeElement.offsetHeight / 2,
behavior: "smooth",
});
}
}
} else {