Rebuilt for 2026

The Wave scrollbar, reborn.

Google Wave is long gone, but its tiny, unintrusive scrollbar deserved better than a jQuery plugin. <wave-scroll> is a zero-dependency Web Component — native scrolling, a glassy overlay grabber, and motion driven almost entirely by CSS.

0 dependencies 7.8 kB gzipped CSS scroll-driven React & Vue

Try the scrollbar →

Scroll with your wheel or trackpad and the grabber tracks you on the compositor. Drag the grabber to scrub. Click the arrows to step between sections and watch the delayed dragger: the grabber lingers while a thin indicator shows where you're headed, then glides over once your pointer leaves.

Native by default Content scrolls in a real overflow container — keyboard, touch, momentum and find-in-page all keep working. The native bar is simply hidden and a custom overlay is painted on top.
CSS does the heavy lifting The resting grabber position rides a scroll-timeline, so the common case costs zero JavaScript per frame. JS only powers drag, arrow steps and the delayed-dragger reveal.
Section pills See the dots on the track? This panel uses sections="h2". Each <h2> gets a pill at its exact spot — click to jump, hover for its label, and the arrows step section to section. Jumps respect scroll-margin, and with haptics a tiny vibration ticks as you cross each one (on supporting devices).
Considerate Honours prefers-color-scheme and prefers-reduced-motion, keyboard-operable, themeable via --wave-accent, and degrades gracefully where scroll-driven animations aren't supported.

Usage

Drop the module in and wrap your content. That's the whole API:

<script type="module" src="wave-scroll.js"></script>

<wave-scroll accent="#7c6cff"> … </wave-scroll>

Optional attributes: auto-hide reveals the bar only on interaction, no-arrows drops the step buttons, sections="h2" adds the jump pills, and haptics ticks as you cross sections.

auto-hide — hover the box; the teal bar fades in

This nested box uses <wave-scroll auto-hide>. At rest the scrollbar is invisible, keeping the content perfectly clean.

Move your pointer over the box and the bar fades in; move away and it fades back out. Everything else — drag, arrows, the delayed dragger — works exactly the same.

It's the same component, just a different attribute. Scroll me to feel it.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget.

Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi.

Why it mattered

In its tiny form-factor the original Wave scrollbar managed to indicate document height, show the current location, scroll by clicking the arrows, and scroll by dragging — and it did all of it without ever getting in your way. Fifteen years on, the platform finally has the primitives to express that idea natively.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.

Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat.

Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.

— You've reached the bottom. The grabber should be resting at the end of its track.