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:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user