Scrollbar Breakout

The most under-appreciated input device on the web is the one you already have. There is no keyboard handler here, no mouse position, no touch listener. The paddle is driven by exactly one number: how far down this page you have scrolled.

How to play

Scroll. That is the whole control scheme. Drag the browser's own scrollbar over on the right, spin the wheel, press the arrow keys, flick a trackpad — anything that moves the page moves the paddle with it. The board stays pinned in place while this column slides past it.

The top of the page puts the paddle at the top of the board, the bottom puts it at the bottom, and everything in between maps linearly. Which means reading this page and playing the game are, mechanically, the same activity.

How it works

Every frame the loop reads scrollY / (scrollHeight - innerHeight), gets a number between 0 and 1, and maps it onto the paddle's vertical travel. Top of the document is the top of the board, bottom is the bottom. That is the entire input layer.

The board itself is position: sticky, which is the only reason this is playable at all — it pins to the top of the viewport so the game stays in front of you while the column you are reading slides past underneath.

The nice part of leaning on the scrollbar is everything that arrives for free: wheel acceleration, keyboard paging, drag, touch momentum, and the accessibility semantics of a scroll container. The paddle's velocity is sampled between frames too, so flicking the page puts spin on the ball.

The catch is equally free: a scrollbar has ends. Scroll past the bottom of the section and the paddle simply stops, parked at the edge of the board, while the ball carries on without you.