An unnecessary full style recalculation is done every scroll event on many pages of colorjs.io

[Inwerpsel]

When checking dev tools for the site, I noticed that every scroll event the --scrolltop custom property of the html element is updated.

While at a glance this might not look expensive, it actually results in a style recalculation of all elements on the page. I'm pretty sure it's the only reason the scrolling is choppy, and removing this property update is enough to make the page scroll normally.

Performance recording during scrolling

Details of a single recalc, taking 25.18ms on desktop.

This is triggered by an event listener that only sets a custom property on the root element.

color.js/assets/js/index.js

Lines 16 to 18 in f50d95a

	document.addEventListener("scroll", evt => {
	root.style.setProperty("--scrolltop", root.scrollTop);
	}, {passive: true});

The only reference to this custom property is in the #toc element, where it's used to move a position: fixed element depending on the scroll position.

color.js/assets/css/docs.css

Lines 13 to 24 in f50d95a

	@media (min-width: 1480px) {
	position: fixed;
	top: 11rem;
	right: calc(var(--page-width) + var(--page-margin) + 1em);
	width: fit-content;
	max-width: calc(var(--page-margin) - 1em);
	margin-left: 1em;
	@supports (top: max(1em, 1px)) {
	top: max(0em, 11rem - var(--scrolltop) * 1px);
	}
	}

It looks a lot like this CSS can be replaced with position: sticky, completely removing the need to update the root property and thereby removing all the time spent on the purple stuff in above graphs.

[svgeesus]

Scrolling is indeed choppy; feel free to send a pull request!