FX-009 · Scroll Rail
A custom scrollbar that scrubs.
The browser's scrollbar becomes a timeline across the bottom of the screen: a marker for every scene, a playhead that shows where you are, and a readout of the scene and the percentage. Drag to scrub, click to jump.
- Weight2.6 KB
- LibraryNone
- PhonesWorks
- Licence€39
Live · Scrub
Drag the timeline.
It is at the bottom of this screen. Grab it anywhere and scrub through the page.
This site swaps the rail for its swipe pager on phones. Open this page on a laptop to drag the timeline.
Live · Jump
Click anywhere on it.
Every scene gets a labelled marker from one attribute. Click the rail and the page travels there.
Live · Sideways
It knows sideways.
A scene that slides in along a horizontal track gets its marker where the scroll really brings it.
01 — Details
What it does.
A timeline
A ruler, a marker for every scene, a playhead, and a readout of the scene and percentage.
Scrub and jump
Drag anywhere on it to scrub through the page, or click to jump.
Understands tracks
Scenes in a horizontal track get their markers where the scroll actually brings them.
No native bars
Every native scrollbar is hidden while it runs, and scrolling itself stays native.
02 — Prompt
Free AI prompt.
Paste this into your AI coding tool to build the effect in your own stack. It carries the behaviour, the build and the traps we hit in production. It is free for pitches and personal work.
Replace the browser scrollbar on this website with a timeline rail, in plain JavaScript. Behaviour - A ruler runs across the bottom of the screen, with a labelled marker for every scene, a playhead, and a readout of the current scene and percentage. - Drag anywhere on it to scrub through the page. Click to jump. - Every native scrollbar on the page is hidden while it runs. Scrolling itself stays native. Build - Use one fixed element. Collect the scenes from an attribute such as data-rail-mark, and place each marker at its scroll position as a share of the page. - Update the playhead in a single frame loop, using transforms only. - Capture the pointer for dragging, and convert its x position into a scroll position. Must hold - Measure the markers again when the page height changes, as fonts and images arrive. - On a horizontal scroll section, a scene's position is where the scroll brings it, not its offset on the page. Work it out from the pinned section's start and the row's travel. - Hiding native scrollbars takes scrollbar-width: none and ::-webkit-scrollbar together. - A drag on the rail must not start a drag on anything behind it. - The page must still scroll with the keyboard. - Restore the scrollbars and remove everything on teardown. Done when every marker lands exactly on its scene, scrubbing feels direct, and the scrollbars come back if the effect is removed.
03 — Code
Or drop it in.
With a licence, the finished effect is one attribute. The small runtime fetches what it needs and removes everything again if the element goes.
<script src="/fx/sitefx.js"></script> <body data-fx="rail"> <section data-fx-rail-mark="Intro">…</section> <section data-fx-rail-mark="Work">…</section> </body>
| Option | Default | What it does |
|---|---|---|
| data-fx-rail-mark | — | On a section: a marker with this label |
| data-fx-rail-scrollbars | true | Set to false to leave native bars visible |
04 — FAQ
Questions.
Is native scrolling still there?
Yes. The rail only replaces how the scrollbar looks and works, so the wheel, keyboard and touch scroll as usual.
Does it work with horizontal scroll?
Yes. It understands horizontal tracks, so markers land where the scroll brings each scene.
Does it work on phones?
Yes, in a compact form with the labels hidden. This site uses a swipe pager there instead.
Can I keep the normal scrollbars?
Yes. Set data-fx-rail-scrollbars to false.
Licence
Scroll Rail · €39
One effect, yours to keep. Unlimited client projects, 1 developer, 12 months of updates. Prices exclude VAT.