enableSPA: false causing weird interaction with the explorer and causing the page to scroll

[cromelex]

Describe the bug
When I click on a link in the explorer, if that page is long (ie, has a scrollbar), the content page scrolls down slightly (as if to align with the link on the explorer)

To Reproduce
Steps to reproduce the behavior:

1. Go to https://dansgarden.eu
2. Click on Technology/Projects, then "Smart plant sensors"
3. See content page scroll incorrectly further down

Going directly to https://dansgarden.eu/projects/plant-sensors also seems to trigger this.

Alternatively

1. Clone quartz repo with docs as content
2. change enableSPA: false, in the quartz config
3. build and serve locally
4. navigate to localhost:8080/features/syntax-highlighting and observe the same scrolling behaviour

Expected behavior
I'd expect the content page not to scroll.

I initially thought this was an issue with a modification I did, but after redoing everything from scratch, step by step, I was finally able to detect it seems to be caused by the enableSPA: false,. I have now been able to reproduce it with the original quartz repo and site (provided the change is made on the config file with enableSPA: false,).
I am using enableSPA: false, in order to use Cloudflare's email obfuscation. Without it, the email addresses are not being deobfuscatted.

[saberzero1]

Hey, I cannot seem to reproduce on mobile. I assume this is a desktop-only issue?

Screen_Recording_20250414_135856_Chrome.mp4

[cromelex]

Hi @saberzero1, yes it's a desktop issue. Sorry, I should have been clearer.

Screencast_20250414_132007.webm

As seen here, the page auto-scrolls when clicking the links in the explorer, on desktop.

Same behaviour is reproduceable on the Quartz website (by cloning the repo and setting docs as the content), if enableSPA is false:

Screencast_20250414_132453.webm

Videocaptures are from Chrome but I have the same issue in Firefox.

[saberzero1]

The issue seems to be related to the prenav event not firing because it is not assigned when enableSPA is false.

quartz/quartz/plugins/emitters/componentResources.ts

Lines 216 to 219 in bfd7234

	window.spaNavigate = (url, _) => window.location.assign(url)
	window.addCleanup = () => {}
	const event = new CustomEvent("nav", { detail: { url: document.body.dataset.slug } })
	document.dispatchEvent(event)

This prevents explorerScrollTop from being saved to the sessionStorage, which then triggers the else branch, using the scrollIntoView function instead, which cascades up the DOM tree, ultimately scrolling the root element as well.

quartz/quartz/components/scripts/explorer.inline.ts

Lines 212 to 222 in bfd7234

	// restore explorer scrollTop position if it exists
	const scrollTop = sessionStorage.getItem("explorerScrollTop")
	if (scrollTop) {
	explorerUl.scrollTop = parseInt(scrollTop)
	} else {
	// try to scroll to the active element if it exists
	const activeElement = explorerUl.querySelector(".active")
	if (activeElement) {
	activeElement.scrollIntoView({ behavior: "smooth" })
	}
	}

I cannot seem to get it to work. I suspect a workaround needs to be implemented in either the spa.inline.ts script with an alternative prenav, or have prenav added to the inline script when enableSPA is false.

[jackyzha0]

i think adding prenav to the inline script when enableSPA is false is very reasonable

[saberzero1]

i think adding prenav to the inline script when enableSPA is false is very reasonable

I can't seem to get it to work. The prenav events seem to trigger on page load only.

[jackyzha0]

how are you adding it? the semantic equivalent is probably beforeunload

[saberzero1]

how are you adding it? the semantic equivalent is probably beforeunload

Yeah, I'll continue tomorrow.

[MathieuDR]

Seems to be happening on my website too on a longer post. It has enableSPA on true though.

Link: https://mathieu.deraedt.dev/output/projects/1747124404-readdeck-highlight-exporter

[codeyoma]

@cromelex @MathieuDR
I was also encountering scroll issues, so I’m temporarily working around it like this.

const activeElement = explorerUl.querySelector(".active")
const scrollContainer = explorer.querySelector(".explorer-content ul")

if (activeElement && scrollContainer) {
  const offset =
    activeElement.getBoundingClientRect().top -
    scrollContainer.getBoundingClientRect().top +
    scrollContainer.scrollTop

  scrollContainer.scrollTo({
    top: offset,
    behavior: "smooth"
  })
}

[isnbh0]

Thank goodness for this issue! I thought I was going insane 😆

I've also been encountering the auto scroll issues even though I have enableSPA: true set.

Using @codeyoma 's workaround resolved this. Thanks a lot! 👍

In my view, this issue seems to actually be two issues -
(a) the prenav omission in the enableSPA: false case
(b) unintended scrolling behavior from scrollIntoView() itself

I did a bit of searching and (b) seems to have been a pain point for many others: w3c/csswg-drafts#9452

Thus, I would like to cautiously suggest that (b) needs to be resolved independently of (a). @codeyoma 's workaround looks promising.

(P.S. I really love this project, thanks so much!!)

[saberzero1]

@cromelex @MathieuDR
I was also encountering scroll issues, so I’m temporarily working around it like this.

const activeElement = explorerUl.querySelector(".active")
const scrollContainer = explorer.querySelector(".explorer-content ul")

if (activeElement && scrollContainer) {
  const offset =
    activeElement.getBoundingClientRect().top -
    scrollContainer.getBoundingClientRect().top +
    scrollContainer.scrollTop

  scrollContainer.scrollTo({
    top: offset,
    behavior: "smooth"
  })
}

Feel free to open a PR for this.