Scroll Fade

Overview

Scroll Fade is not a Blazor component: it is a set of CSS classes in zits-ui.css that mask the edges of any overflow-*-auto element, eased in and out via animation-timeline: scroll() so no JavaScript or scroll listener is involved. It falls back to a static two-edge fade in browsers without scroll-driven animation support (@supports (animation-timeline: scroll())). It is used by ZitsMessageScrollerViewport (scroll-fade-b, bottom edge) and ZitsAttachmentGroup (scroll-fade-x, horizontal edges).

Install

navius add theme --to ./src/MyApp --namespace MyApp.Ui

Usage

<div class="scroll-fade h-40 overflow-y-auto rounded-lg border p-4">
    <ul>...</ul>
</div>

<div class="scroll-fade-x flex gap-3 overflow-x-auto rounded-lg border p-4">
    ...
</div>

Parts and props

Not applicable: Scroll Fade has no Blazor component and no props, only CSS classes applied directly to a scrolling element’s class.

Styling surface

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

Parameter (class)	Values
scroll-fade / scroll-fade-y	Fades both block-axis edges (top and bottom).
scroll-fade-x	Fades both inline-axis edges (RTL-aware).
scroll-fade-t / scroll-fade-b	Fades the top / bottom edge only.
scroll-fade-l / scroll-fade-r	Fades the left / right edge only.
scroll-fade-s / scroll-fade-e	Fades the inline-start / inline-end edge only (RTL-aware).
scroll-fade-none	Disables the mask and the scroll-timeline animation.

Data attribute hooks

Not applicable: Scroll Fade emits no data-* attributes; it reads only its own CSS custom properties (--sf-t/--sf-b/--sf-s/--sf-e).

Scroll Fade wires no ARIA role or state: it is a purely visual mask-image effect and has no interactive or semantic behavior of its own.