Scroll utilities

CSS classes for overflow fades and scrollbar chrome. They ship in theme.css.

CSS utilities for overflow scrollers. They ship in theme.css — no extra import.

These are not a component. Put the class on the element that has overflow-y-auto / overflow-x-auto.

Classes

Class	Role
bridge-scroll-fade	Vertical fade (alias of -y).
bridge-scroll-fade-y	Vertical fade on the overflow scroller.
bridge-scroll-fade-x	Horizontal fade on the overflow scroller.
bridge-scroll-fade-none	Disable the fade. Works in any class order.
bridge-soft-scrollbar	Thin, rounded thumb.
bridge-hide-scrollbar	Hide the scrollbar; wheel / keyboard / programmatic scroll still work.

Vertical fade

Horizontal fade

Hide scrollbar

Pair the fade with bridge-hide-scrollbar when the fade is the overflow hint.

Fade size

Depth defaults to 12% of the container, capped at 40px. That is easy to miss in a short preview — override with --bridge-scroll-fade-size:

<div
  class="bridge-scroll-fade-y overflow-y-auto [--bridge-scroll-fade-size:1.5rem]"
>
  …
</div>

<div className="bridge-scroll-fade-y overflow-y-auto [--bridge-scroll-fade-size:1.5rem]">
  …
</div>

Disable the fade

bridge-scroll-fade-none turns the fade off regardless of class order:

<div class="bridge-scroll-fade-none bridge-scroll-fade-y overflow-y-auto">
  …
</div>

<div className="bridge-scroll-fade-none bridge-scroll-fade-y overflow-y-auto">
  …
</div>

Soft scrollbar

Caution

Do not pair bridge-scroll-fade-* with bridge-soft-scrollbar on the same node — the mask dissolves the thumb at the edges. Use fade + bridge-hide-scrollbar when the fade is the overflow hint.

Note

Do not put bridge-scroll-fade-x and bridge-scroll-fade-y on the same node — both set mask-image, and the later rule wins. Put background and border on a wrapper; put the fade class on the inner scroller so the mask dissolves content, not the card chrome.

Behavior

Scroll-aware when the browser supports scroll-driven animations: crisp start edge at rest, both edges mid-scroll, crisp end edge at the end.
If content does not overflow, no fade.
Without scroll-driven animations, no fade. Wheel / keyboard / programmatic scroll still work.
bridge-scroll-fade-x follows reading direction (RTL included).

Used by

Component	Classes
TimePanel	bridge-scroll-fade-y and bridge-hide-scrollbar on columns. Add bridge-scroll-fade-none via classes.column to disable the fade.
Select / Autocomplete	bridge-soft-scrollbar on the options scroller.
Modal / Drawer scroll="paper"	bridge-scroll-fade-y and bridge-hide-scrollbar on the panel.
Field picker drawers	Inner bridge-scroll-fade-x; vertical fade comes from scroll="paper".

Next steps

Theme colors — import and remap the theme file these utilities ship in
Classes — override component class slots
Modal — scroll="paper" panel overflow