Overlay scrollbars via OverlayScrollbars

overflow: overlay is dead in current Chromium, so an appearing native
scrollbar shifted the layout again. OverlayScrollbars replaces it with
floating auto-hiding scrollbars that never reserve space (native window
scroll APIs unaffected on a body target). Themed via --os-* variables in
pagerite.css; the html scrollbar-color styling stays as no-JS fallback.
(package-lock.json is gitignored.)
This commit is contained in:
2026-08-18 20:30:08 +00:00
parent 7f140001fa
commit a75ad6f5da
4 changed files with 29 additions and 21 deletions
+12
View File
@@ -5,8 +5,20 @@
// Also: scroll-reveal effects and code copy buttons. These need no
// support from the article itself and are re-applied after each swap.
import { showAuthIframe } from 'paskia'
import { OverlayScrollbars } from "overlayscrollbars";
import "overlayscrollbars/overlayscrollbars.css";
(() => {
// Overlay scrollbars: the native kind reserves a strip of layout (or
// shifts the layout when it appears; overflow: overlay is dead), so we
// replace it with floating ones that cover content instead. The body
// remains the native viewport scroller — window scroll events, scrollY
// and scroll restoration are unaffected; only the scrollbar UI is
// custom. Theme variables are in pagerite.css.
OverlayScrollbars(document.body, {
scrollbars: { autoHide: "scroll" },
});
if (import.meta.env.DEV) {
// In dev the base stylesheet is injected by Vite from JS (linking the
// raw module would pull in its HMR wrapper). Theme and banner-design