# How to record a website scroll video

> How to screen record a website scrolling without stutter, pop-ups or a cropped page: prepare the page, set up the recorder, automate the scroll, then trim.

Source: https://websitescrollvideo.com/guides/how-to-record-a-website-scroll-video/ · Updated 30 October 2026 · Website Scroll Video

**The short answer:** Clean the page first (dismiss the cookie banner, close chat widgets), size the browser window to the exact frame you want, record at 60 fps with a recorder that writes a constant frame rate, and let a script do the scrolling rather than your hand. Or skip the recorder and give the URL to a renderer that calculates the scroll for you.

## Two ways to get the footage

You can **record** the page: a screen recorder captures whatever your monitor shows while the page scrolls. Or you can **render** it: a tool opens the page in its own browser and builds the video frame by frame. This guide is about the first, because sometimes it is the right call. If the page is public and you only need the scroll, the [step-by-step guide to making one from a link](https://websitescrollvideo.com/guides/how-to-make-a-website-scroll-video/) is quicker.

Recording yourself makes sense when:

- The page sits behind a login, on `localhost`, or on a network only you can reach.
- You want to show real interaction: typing into a form, opening menus, dragging things.
- You need your voice or camera on top, as in a tutorial.

## Prepare the page

Most bad takes are lost before the recorder starts. Do these once and every take improves.

1. Open the page in a fresh profile or a private window, so your extensions, bookmarks bar and signed-in state stay out of the shot.
2. Accept or dismiss the cookie banner, close the newsletter modal and minimise the chat launcher. They tend to come back on reload, so do this last.
3. Scroll to the bottom and back once before recording. That loads lazy images and fires entrance animations, so the take does not catch half-loaded sections.
4. Hide the scrollbar if it bothers you. In DevTools, add `html { scrollbar-width: none; }` to the page’s styles.
5. Turn off notifications. A banner sliding in at the top right ruins an otherwise perfect take.

## Size the window to the frame

Decide the output shape first, then make the browser window that shape. Recording a full 16:10 screen and cropping it to 9:16 afterwards throws away most of your pixels and leaves a blurry result.

- For 16:9, a window of 1280 × 720 or 1920 × 1080 (content area) is the cleanest.
- For a phone-shaped video, open DevTools, switch on the device toolbar and pick a phone. The page then serves its mobile layout, and you record just that viewport.
- Set the page zoom to 100%. Zoomed pages render text at odd sizes and look soft once scaled.

A retina or high-DPI display records at twice the pixel size of the window, which is good: you can scale down to 1080p and keep text sharp.

## Set up the recorder

| Setting | Use | Why |
| --- | --- | --- |
| Frame rate | 60 fps | A scroll is constant movement. At 30 fps each frame jumps twice as far, which reads as judder |
| Frame rate mode | Constant (CFR) | Variable frame rate files stutter in editors and on some players |
| Capture area | The browser window or a region, not the full display | No cropping later, so no lost resolution |
| Cursor | Hidden, unless you are pointing at something | A still cursor in the middle of a scroll looks like a mistake |
| Quality | High bitrate, or lossless if you will edit | Scrolling text is the hardest thing for an encoder: every pixel moves every frame |

On a Mac, the built-in recorder (Shift ⌘ 5) and QuickTime write variable frame rate files. OBS Studio, free on macOS, Windows and Linux, records at a constant frame rate you choose. On Windows, the Snipping Tool and Xbox Game Bar both record, but OBS gives you the most control.

## Let something other than your hand scroll

This is the step that decides whether the video looks professional. A mouse wheel moves in notches, a trackpad flicks and coasts, and neither holds an even speed for twenty seconds. [Why scroll recordings stutter](https://websitescrollvideo.com/guides/fix-jerky-scrolling-in-screen-recordings/) goes into the causes.

The reliable fix is to have the browser scroll itself. A short script pasted into the DevTools console scrolls the whole page on an easing curve over a set time. The full snippet, and how to pace it, is in [how to auto-scroll a website for a video](https://websitescrollvideo.com/guides/auto-scroll-website-video/).

1. **Paste the script, do not run it yet.** Set the duration inside it to the length you want the scroll to take.
2. **Start the recorder.** Give yourself a second or two of stillness at the top. You can trim it later, and a held first frame makes a better thumbnail.
3. **Run the script and keep your hands off.** Do not touch the mouse or trackpad until the page has stopped. Any input fights the script.
4. **Stop, then trim the ends.** Cut to the first frame of motion and the last, plus whatever hold you want either side.

## When recording is the long way round

Done properly, the above is a fifteen-minute job per take, and a different shape means another take. If the page is public, a renderer does all of it from the URL: it opens the page at desktop, tablet or phone width, removes the pop-ups, reads the page at double density and calculates the motion at a locked 24, 30 or 60 fps. You change a setting and export again instead of re-recording.

> **Try both and compare.** Website Scroll Video gives every new account 51 free credits, enough for a couple of short 1080p exports. Paste the same page you just recorded and put the two files side by side. [Screen recording vs a URL renderer](https://websitescrollvideo.com/guides/screen-recording-vs-url-to-video/) covers the trade-offs.

## Questions

### What is the best free screen recorder for scrolling websites?

OBS Studio. It is free on macOS, Windows and Linux, records at a constant frame rate, and can capture a single window. The recorders built into macOS and Windows work, but give you less control over frame rate and quality.

### Why does my recording look smooth on screen but choppy when played back?

Usually a variable frame rate file, a recording at 30 fps, or a bitrate too low for text that moves every frame. Record at a constant 60 fps with a high bitrate, and let a script scroll rather than a wheel.

### How do I record a whole web page that is longer than my screen?

Scroll it while recording, ideally with a script so the speed stays even. A screen recorder can only capture what is in the window at any moment, so the length of the video is decided by how fast the page moves.