Basic Scroll Detection
Scroll down to see real-time scroll position updates:
Scroll Monitor
Scroll Position: px
Direction:
Velocity: px/scroll
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, updates frequently
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: px
Normal Parallax (1.0x speed)
Moves with normal scroll
Y Offset: px
Fast Parallax (1.2x speed)
Moves faster than scroll
Y Offset: px
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.
Performance Information
🚀 Optimizations
- RequestAnimationFrame debouncing for smooth scrolling
- Passive event listeners for better performance
- WeakMap for memory-efficient element tracking
- Automatic cleanup of disconnected elements
- Configurable throttling (default: 100ms)
- Direction detection with velocity calculation
📊 Usage Patterns
- ds_on_scroll("$signal = value") - Default 100ms throttle
- ds_on_scroll("$signal++", throttle="50") - Custom throttle
- Available context: direction, scrollY, velocity, visible, progress, etc.
- Direction: 'up', 'down', or 'none'
- Use ds_signals() for reactive state
- Use ds_style() for dynamic styling
- Avoid complex JavaScript - use context variables
- Works with dynamically added elements
- Automatic initial execution on page load