Scroll Edge Fade
pointer · keyboard · touch
A scroll region whose edges describe hidden content without abrupt clipping.
Liveadaptive
Scroll the list. Edge fades appear only when content remains beyond that edge.
- Morph Surface
- Table of Contents
- Contrast Checker
- Stateful Spinner
- Context Preview Link
- Scroll Edge Fade
- Postmark Stamp
- Passport Page Turn
- Memory Box
- Paper Treatment
- Command Menu
- Dither Portrait
- Behavior
A scroll region whose top and bottom edges fade to signal hidden content instead of hard clipping.
- Interaction
Pointer wheel, trackpad, touch drag, and keyboard focus within the region all update the fades.
- Controls
Scroll the list. Edge fades appear only when content remains in that direction.
- Motion & sound
Fades are opacity masks tied to scroll position — static under reduced motion still update on scroll. No sound.
- Learnings
Edge fades should describe remaining content, not decorate every overflow box by default.
- Source
Reuse `ScrollEdgeFadeSpecimen` as a primitive pattern; the mask uses CSS gradients + scroll metrics.