Smooth Scrolling for Screen Recordings

I needed to create a screen recording of a website that I built in which the page was slowly (and smoothly) scrolling down.

Using the scroll wheel on my mouse manually would look clumsy, so that’s out.

I know that some software like TechSmith’s Snagit can accomplish this but I wanted to have more control over it by scrolling down to a specific location, pausing for a few seconds, and then continuing to scroll down. So that’s out too.

Here’s a script which you can simply paste in to the developer tools console. It’d be cool to modify this so that you can have it scroll to different Y values in a series of different time elapsed, but I figured it would be easier to just repeatedly copy/paste this and manually enter the new Y value as I recorded.

const targetY = 1100;
const scrollStep = 1;
const delay = 20;

const scrollInterval = setInterval(() => {
  const currentY = window.scrollY;
  
  if (currentY + scrollStep >= targetY) {
    window.scrollTo(0, targetY); // Snap exactly to target
    clearInterval(scrollInterval);
  } else {
    window.scrollBy(0, scrollStep);
  }
}, delay);

Here’s the video I made which will begin to scroll at approximately 8 seconds: