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.

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. No separate install; it is already pulled in by navius add chat.

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