Scroll Shadows

The edge fade appears only when there is more to scroll. Chrome 115+, Safari 26+; Firefox still open.

Modern CSSData GridPro

Usage

Meant for

Data GridScroll AreaTable

Examples

On a Scroll Area

The edge fades appear only when there is more to scroll — scroll the list and watch both edges react. It runs on a named scroll timeline, so there is no scroll listener and no state: the class picks up the viewport of a WunderUI ScrollArea by itself (or any element you mark data-wm-scroller), and the fades sit beside it. Chrome 116+ and Safari 26+; elsewhere both fades simply stay visible, which is the old behaviour and not a bug.

Invoice #1042Sent
Invoice #1043Sent
Invoice #1044Sent
Invoice #1045Queued
Invoice #1046Queued
Invoice #1047Queued
Invoice #1048Queued
Invoice #1049Queued
Invoice #1050Queued
Invoice #1051Queued

The class is wm wm-scroll-shadows — the first half is the marker the trigger and reduced-motion rules hook into, the second is the effect.