Scroll Timing API

Scroll like a user; measure like a tool

This page is intentionally tall. While you scroll, the polyfill emits PerformanceScrollTiming entries. The left panel summarizes smoothness and frame drops.

What you’re seeing

Each entry tracks a scroll interaction: startTime, duration, expected frames (at 60Hz), produced frames (rAF callbacks), and a smoothness score.

Try this

Turn on “Simulate jank”, then do a fast wheel scroll. You should see smoothness drop and dropped frames increase. Disable it to compare.

Section 1 — Warm-up

Short scroll, quick entry

Scroll a bit to generate a baseline entry. Then enable jank and repeat. This demo is designed to exercise the repo’s polyfill API shape rather than perfectly emulate browser internals.

Section 1.5 — Nested scroller

Scroll inside this box

Section 2 — Content blocks

Layout + paint work

Section 3 — Mixed text

A little more reading

A good scroll metric needs to be comparable across pages. This demo keeps the content simple so you can focus on how timing entries are emitted and aggregated.

If you’re building RUM, you’d typically observe entries and send summaries (p50/p75/p95 smoothness) along with context.

Section 4 — The bottom

Done

You made it. Hit “Scroll to top” and repeat a few runs. If you want to compare sources, use mouse wheel vs touchpad vs keyboard.

Scroll Timing API — Demo

Scroll like a user; measure like a tool

What you’re seeing

Try this