Components / Scroll Fade

Scroll Fade

A scroll-aware edge fade for scroll containers, driven by a CSS scroll-driven animation so the mask eases in and out as the reader scrolls, no JavaScript. Used by the message scroller's viewport (bottom edge) and the attachment group (horizontal edges); apply it to any element with overflow-*-auto. Falls back to a static two-edge fade in browsers without scroll-driven animation support, and drops to that same static fade under reduced motion.

Examples

Scroll the list: the top edge is crisp at rest, the bottom fades; both fade mid-scroll, and the far edge sharpens once you reach it.

  • Row 1 of the transcript
  • Row 2 of the transcript
  • Row 3 of the transcript
  • Row 4 of the transcript
  • Row 5 of the transcript
  • Row 6 of the transcript
  • Row 7 of the transcript
  • Row 8 of the transcript
  • Row 9 of the transcript
  • Row 10 of the transcript
  • Row 11 of the transcript
  • Row 12 of the transcript
  • Row 13 of the transcript
  • Row 14 of the transcript
  • Row 15 of the transcript
  • Row 16 of the transcript
razor
<div class="scroll-fade h-40 overflow-y-auto rounded-lg border p-4">
    <ul>...</ul>
</div>

Horizontal rows, like ZitsAttachmentGroup, use scroll-fade-x:

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
razor
<div class="scroll-fade-x flex gap-3 overflow-x-auto rounded-lg border p-4">
    ...
</div>

Installation

Ships as plain CSS in zits-ui.css, available automatically once you reference Zits.Ui. Vendored consumers get it when the theme stylesheet is copied in by navius add theme.

API reference

Fade depth and reveal distance are fixed constants in this build (--scroll-fade-size: min(12%, 40px), --scroll-fade-reveal: 96px), not parametrised utility classes.

Prop Type Default
scroll-fade shorthand fades both block-axis edges (top and bottom)
scroll-fade-y shorthand alias for scroll-fade
scroll-fade-x shorthand fades both inline-axis edges (RTL-aware)
scroll-fade-t edge fades the top edge only
scroll-fade-b edge fades the bottom edge only
scroll-fade-l edge fades the left edge only
scroll-fade-r edge fades the right edge only
scroll-fade-s edge fades the inline-start edge only, RTL-aware
scroll-fade-e edge fades the inline-end edge only, RTL-aware
scroll-fade-none reset disables the mask