Skip to main content
The page-scrolling example demonstrates how to scroll the viewport and scroll within specific container elements using a blog post layout.

​
Configuration

Here’s the complete webreel.config.json for this example: 
{
  "$schema": "https://webreel.dev/schema/v1.json",
  "videos": {
    "page-scrolling": {
      "url": "./web/index.html",
      "viewport": { "width": 1920, "height": 1080 },
      "zoom": 2,
      "waitFor": "main",
      "defaultDelay": 600,
      "steps": [
        { "action": "pause", "ms": 500 },
        { "action": "scroll", "y": 400 },
        { "action": "scroll", "y": 400 },
        { "action": "scroll", "y": -300 },
        { "action": "scroll", "y": 200, "selector": ".sidebar", "delay": 1000 }
      ]
    }
  }
}

​
What It Demonstrates

​
Scroll Action

The scroll action scrolls vertically by a specified number of pixels: 
{ "action": "scroll", "y": 400 }
  • y: Pixels to scroll (positive = down, negative = up)
  • selector (optional): Scroll a specific element instead of the whole page

​
Full-Page Scrolling

Without a selector, the scroll action affects the entire page: 
{ "action": "scroll", "y": 400 },
{ "action": "scroll", "y": 400 }
These two steps scroll down 800 pixels total, revealing content below the fold.

​
Scrolling Up

Negative y values scroll back up: 
{ "action": "scroll", "y": -300 }
This scrolls up 300 pixels, returning to a section that was just passed.

​
Container Scrolling

The selector field scrolls a specific element with overflow: auto or overflow: scroll: 
{ "action": "scroll", "y": 200, "selector": ".sidebar", "delay": 1000 }
This scrolls the .sidebar element independently of the main page scroll. This is useful for:
  • Scrollable sidebars
  • Modal dialogs with overflow content
  • Embedded lists or tables
  • Code blocks with horizontal scroll

​
Smooth Scrolling Animation

Webreel automatically animates scroll actions with smooth easing, creating a natural scrolling experience rather than instant jumps.

​
Pacing with Delays

The defaultDelay of 600ms between scrolls gives viewers time to scan the content: 
"defaultDelay": 600
The sidebar scroll has an extended 1000ms delay to emphasize the interaction: 
{ "action": "scroll", "y": 200, "selector": ".sidebar", "delay": 1000 }

​
Running the Example

cd examples/page-scrolling
webreel record
The output video will be saved to videos/page-scrolling.mp4.

​
Next Steps

Build docs developers (and LLMs) love

Get started for freeTalk to us