Shadix.Components.ScrollArea (shadix v0.0.1)

Copy Markdown View Source

Scroll area component, translated from the shadcn/ui (new-york-v4) scroll-area.

NOTE: the React/Radix original replaces the browser's native scrollbar with a custom overlay scrollbar (the ScrollBar/ScrollAreaThumb primitives) driven by JavaScript. This v1 is intentionally CSS-only: it keeps the native scroll behaviour and merely styles the native scrollbars (thin width, rounded bg-border thumb) via scrollbar-width and the ::-webkit-scrollbar pseudo-elements. There is no Radix-style custom-scrollbar JS and therefore no LiveView hook.

The outer scroll-area wrapper clips overflow; the inner scroll-area-viewport is the scrollable element and receives the caller's content. Give the wrapper a constrained size (e.g. class="h-72 w-48") so there is something to scroll.

Summary

Functions

Renders a scroll area with styled native scrollbars.

Functions

scroll_area(assigns)

Renders a scroll area with styled native scrollbars.

The caller's :class is applied to the outer wrapper (typically to size it), while the inner viewport handles the actual scrolling.

Attributes

  • class (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)