Overlay Scrollbar

A quiet page scrollbar without a layout gutter. The document still owns scrolling.

Back to utilities

Scroll to reveal the thumb. Stop scrolling and it fades away while you read. With a mouse, move to the trailing edge to reveal it again. Drag the thumb, click the track, or focus it with Tab and use Arrow keys, Page Up/Down, Home or End.

Touch and wheel scrolling stay native. Reduced-motion preferences remove the fade transition. Forced-colors mode, printing and horizontal page overflow keep the native scrollbar instead. Disabling the enhancement restores it.

Opt-in public module

import OverlayScrollbar from "@wpmoo/ui/overlay-scrollbar.js";
const owner = document.querySelector(".moo-ui");
const scrollbar = OverlayScrollbar.getOrCreateInstance(owner);
// scrollbar.refresh(); // after host geometry changes
// scrollbar.dispose(); // restore the native scrollbar

The stylesheet must be loaded first. There is one instance per native scroll target, attached to one explicit theme owner. The default is the standards-mode document; pass scrollElement to use an existing native scrolling region, like the catalog's Page main. No replacement viewport is created. Showing and hiding the thumb never changes content width; enabling it initially removes the native gutter.

Options and theme tokens

hideDelay defaults to 900 milliseconds; label supplies the localized accessible name. The default is “Page scroll position”. Importing the module does not initialize anything.

Bootstrap does not provide an overlay scrollbar. Its two geometry tokens are --moo-scrollbar-overlay-thumb-size (backed by $moo-scrollbar-overlay-thumb-size, inheriting the shared thin-scrollbar scale) and --moo-scrollbar-overlay-hit-size (backed by $moo-scrollbar-overlay-hit-size, a 24px interaction target). Color uses Bootstrap's secondary/emphasis text tokens, radius uses its pill token, edge spacing uses Bootstrap's smallest positive spacing step, and motion uses its reduced-motion-aware fade transition.

Reading section 1

Read at your own pace. The scroll indicator stays out of the way until you need it. The page keeps its normal document structure, native scrolling, links and keyboard behavior.

Try another theme or direction, resize the viewport, and compare the same content with the native scrollbar. The indicator follows the page position without moving the reading column.

Reading section 2

Read at your own pace. The scroll indicator stays out of the way until you need it. The page keeps its normal document structure, native scrolling, links and keyboard behavior.

Try another theme or direction, resize the viewport, and compare the same content with the native scrollbar. The indicator follows the page position without moving the reading column.

Reading section 3

Read at your own pace. The scroll indicator stays out of the way until you need it. The page keeps its normal document structure, native scrolling, links and keyboard behavior.

Try another theme or direction, resize the viewport, and compare the same content with the native scrollbar. The indicator follows the page position without moving the reading column.

Reading section 4

Read at your own pace. The scroll indicator stays out of the way until you need it. The page keeps its normal document structure, native scrolling, links and keyboard behavior.

Try another theme or direction, resize the viewport, and compare the same content with the native scrollbar. The indicator follows the page position without moving the reading column.

Reading section 5

Read at your own pace. The scroll indicator stays out of the way until you need it. The page keeps its normal document structure, native scrolling, links and keyboard behavior.

Try another theme or direction, resize the viewport, and compare the same content with the native scrollbar. The indicator follows the page position without moving the reading column.

Reading section 6

Read at your own pace. The scroll indicator stays out of the way until you need it. The page keeps its normal document structure, native scrolling, links and keyboard behavior.

Try another theme or direction, resize the viewport, and compare the same content with the native scrollbar. The indicator follows the page position without moving the reading column.

Reading section 7

Read at your own pace. The scroll indicator stays out of the way until you need it. The page keeps its normal document structure, native scrolling, links and keyboard behavior.

Try another theme or direction, resize the viewport, and compare the same content with the native scrollbar. The indicator follows the page position without moving the reading column.

Reading section 8

Read at your own pace. The scroll indicator stays out of the way until you need it. The page keeps its normal document structure, native scrolling, links and keyboard behavior.

Try another theme or direction, resize the viewport, and compare the same content with the native scrollbar. The indicator follows the page position without moving the reading column.

Reading section 9

Read at your own pace. The scroll indicator stays out of the way until you need it. The page keeps its normal document structure, native scrolling, links and keyboard behavior.

Try another theme or direction, resize the viewport, and compare the same content with the native scrollbar. The indicator follows the page position without moving the reading column.

Reading section 10

Read at your own pace. The scroll indicator stays out of the way until you need it. The page keeps its normal document structure, native scrolling, links and keyboard behavior.

Try another theme or direction, resize the viewport, and compare the same content with the native scrollbar. The indicator follows the page position without moving the reading column.

Reading section 11

Read at your own pace. The scroll indicator stays out of the way until you need it. The page keeps its normal document structure, native scrolling, links and keyboard behavior.

Try another theme or direction, resize the viewport, and compare the same content with the native scrollbar. The indicator follows the page position without moving the reading column.

Reading section 12

Read at your own pace. The scroll indicator stays out of the way until you need it. The page keeps its normal document structure, native scrolling, links and keyboard behavior.

Try another theme or direction, resize the viewport, and compare the same content with the native scrollbar. The indicator follows the page position without moving the reading column.

Reading section 13

Read at your own pace. The scroll indicator stays out of the way until you need it. The page keeps its normal document structure, native scrolling, links and keyboard behavior.

Try another theme or direction, resize the viewport, and compare the same content with the native scrollbar. The indicator follows the page position without moving the reading column.

Reading section 14

Read at your own pace. The scroll indicator stays out of the way until you need it. The page keeps its normal document structure, native scrolling, links and keyboard behavior.

Try another theme or direction, resize the viewport, and compare the same content with the native scrollbar. The indicator follows the page position without moving the reading column.

Reading section 15

Read at your own pace. The scroll indicator stays out of the way until you need it. The page keeps its normal document structure, native scrolling, links and keyboard behavior.

Try another theme or direction, resize the viewport, and compare the same content with the native scrollbar. The indicator follows the page position without moving the reading column.

Reading section 16

Read at your own pace. The scroll indicator stays out of the way until you need it. The page keeps its normal document structure, native scrolling, links and keyboard behavior.

Try another theme or direction, resize the viewport, and compare the same content with the native scrollbar. The indicator follows the page position without moving the reading column.