LanternUI.Components.ScrollArea (LanternUI v0.8.2)

Copy Markdown View Source

ScrollArea — themed scrollbar wrapper around native overflow scrolling. No Fluxon equivalent.

Pure CSS: the browser keeps ownership of wheel, touch, momentum, and scrollbar auto-hide behavior; LanternUI only themes the scrollbar (scrollbar-width/scrollbar-color plus the ::-webkit-scrollbar pseudo-elements) through --lantern-* tokens. No JS hook.

<.scroll_area label="Recent activity" class="feed" style="max-height: 20rem;">
  <p :for={item <- @items}>{item}</p>
</.scroll_area>

The consumer constrains the box (max-height, height, grid track, …); without a constraint nothing overflows and no scrollbar appears.

Accessibility

Per the WAI-ARIA guidance for scrollable containers, a region whose content is reachable only by scrolling must be operable from the keyboard. When label is set the wrapper renders role="region", aria-label, and tabindex="0" so keyboard users can focus it and scroll with the arrow keys. Omit label only when the scrolled content manages focus itself (e.g. it wraps an interactive widget with its own tab stops).

Summary

Functions

scroll_area(assigns)

Attributes

  • label (:string) - Accessible name; when set the wrapper becomes a focusable, keyboard-scrollable role="region". Omit only when the content manages focus itself. Defaults to nil.
  • orientation (:string) - Which axis may scroll; the other axis hides its overflow. Defaults to "vertical". Must be one of "vertical", "horizontal", or "both".
  • class (:any) - Extra classes merged onto the root element. Defaults to nil.
  • Global attributes are accepted. Arbitrary HTML/phx-* attributes passed through.

Slots

  • inner_block (required) - Scrolled content.