10

Scroll Handler

Data-on-scroll functionality with optimized scroll detection

Basic Scroll Detection

Scroll down to see real-time scroll position updates:

Scroll Monitor

Position: px

Activity:

Hide/Show Based on Scroll Direction

Fixed indicators that respond to scroll direction (like the comparison demo):

Scroll up and down to see the indicators change on the right side!

Scroll Progress Indicator

A progress bar that fills as you scroll:

Scroll Progress

Page Progress:

Throttling Configuration

Different throttle settings for performance optimization:

High Frequency (25ms)

updates

Very responsive

Medium Frequency (100ms)

updates

Balanced performance

Low Frequency (250ms)

updates

Best for performance

Parallax Effect

Elements that move at different speeds based on scroll:

Slow Parallax (0.8x speed)

Moves slower than scroll

Y Offset:

Normal Parallax (1.0x speed)

Moves with normal scroll

Y Offset:

Fast Parallax (1.2x speed)

Moves faster than scroll

Y Offset:

Scroll-triggered Animations

Elements that animate when they come into view:

Fade In Animation

This box fades in when you scroll to it.

Scale In Animation

This box scales in when visible.

Slide In Animation

This box slides in from the side.

How Scroll Handling Works

Performance Optimizations

  • RequestAnimationFrame throttling for smooth 60fps updates
  • Configurable throttling with 100ms default
  • Passive event listeners prevent scroll jank
  • WeakMap storage for automatic memory cleanup
  • 50ms velocity decay for responsive detection
  • Optional smooth interpolation with lerp

Available Signals

  • scroll.x - Horizontal scroll position
  • scroll.y - Vertical scroll position
  • scroll.direction - 'up', 'down', or 'none'
  • scroll.velocity - Scroll speed in px/s
  • scroll.page_progress - Page scroll % (0-100)
  • scroll.visible - Element in viewport

Scrolling UP

Scroll up detected

Scrolling DOWN

Scroll down detected