How to Record Smooth Scrolling in Browsers

Scrolling looks smooth in person but choppy in recordings. The mouse wheel produces inconsistent scroll speeds, frame drops during recording create judder, and codec compression makes it worse. Here's how to get buttery-smooth scroll footage.

Why scrolling looks bad in recordings

Three compounding issues:

1. Mouse wheel input is discrete — it sends scroll events in "notches," creating small jumps rather than continuous motion
2. Frame drops during recording — even losing 2-3 frames per second makes scrolling look jerky
3. Temporal compression — H.264 handles scrolling poorly because every pixel changes every frame, exhausting the codec's motion estimation

Method 1: Use keyboard scrolling

The simplest fix: don't scroll with the mouse.

• Spacebar: Scrolls exactly one viewport height — consistent, predictable, no jitter
• Arrow keys: Small, consistent increments (typically 40px per press)
• Page Down: Consistent full-page scrolls

For continuous smooth scrolling, hold the down arrow key. The browser's built-in repeat rate produces much smoother motion than mouse wheel input because it's a consistent, predictable interval.

Method 2: Trackpad gestures

If you have a trackpad, two-finger scrolling produces the smoothest motion for recordings. Unlike mouse wheels (discrete notches), trackpads send continuous scroll events with natural momentum.

Tips for trackpad recording:

• Start the gesture slowly — trackpad acceleration can cause fast initial jumps
• Maintain constant finger speed rather than flicking
• Let momentum scrolling do the work for long pages — one smooth flick rather than repeated gestures

Method 3: JavaScript-controlled scrolling

For maximum control, use the browser console to create perfectly smooth scrolls:

window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });

Or for a specific speed (pixels per frame at 60fps):

let pos = window.scrollY;
const speed = 2; // pixels per frame
function scroll() {
  pos += speed;
  window.scrollTo(0, pos);
  if (pos < document.body.scrollHeight - window.innerHeight) {
    requestAnimationFrame(scroll);
  }
}
scroll();

This produces mathematically perfect scroll motion — no human hand jitter, no acceleration variation.

Recording settings for scroll-heavy content

Frame rate: Record at 60fps for scrolling content, even if your final delivery is 30fps. The extra frames give the codec more data to work with during motion. Downscale to 30fps in post if needed — it'll still look smoother than recording at 30fps natively.

Bitrate: Scrolling is one of the hardest motions for video codecs. Increase your bitrate by 50-100% above normal for scroll-heavy sections. In CRF mode, use CRF 16-18 instead of the typical 20-23.

Hardware acceleration: Ensure hardware video encoding is enabled in your recording software. Software encoding can't keep up with full-frame scrolling at 60fps, causing frame drops that appear as judder.

Browser-side optimization

Before recording scroll-heavy content:

• Disable smooth scrolling if using keyboard method — you want instant response, not the browser's own easing (chrome://flags → Smooth Scrolling → Disabled)
• Close other tabs — GPU memory affects scroll performance
• Disable extensions that modify page content (ad blockers, dark mode extensions) — they can cause repaints during scroll
• Ensure hardware acceleration is enabled in browser settings

The nuclear option: fake it

For marketing videos where scroll smoothness is critical: take a full-page screenshot, import it into video editing software, and animate a vertical pan across it. Zero scroll jank guaranteed, because there's no actual scrolling happening — just a smooth image translation.

This is how most polished landing page videos achieve their impossibly smooth scrolls. The "recording" is actually an animation of a static screenshot.