Scroll Fade
A visual edge cue for the real overflow element, with RTL-aware logical directions and a static fallback.
Example
01 deployment event recorded
02 deployment event recorded
03 deployment event recorded
04 deployment event recorded
05 deployment event recorded
06 deployment event recorded
07 deployment event recorded
08 deployment event recorded
09 deployment event recorded
10 deployment event recorded
11 deployment event recorded
12 deployment event recorded
overflow: measuring
Usage
Apply the class to the element that actually scrolls. Keep borders and card chrome on an outer wrapper.
<div class="scroll-fade" style="max-height: 14rem; overflow-y: auto;"> <!-- long scrollable content --></div>API
scroll-fade and scroll-fade-y fade block edges. Use scroll-fade-x, physical -t/-b/-l/-r, logical -s/-e, or scroll-fade-none.
Set --scroll-fade-size, logical or physical edge variables, or --scroll-fade-reveal for custom depth and reveal distance. Physical left/right never swap in RTL; logical start/end do.
The utility promises horizontal writing modes only. Vertical writing modes are deferred. The owner should measure overflow and set data-scroll-fade-overflow="false" when no content overflows.