Packages

mishka_chelekom

0.0.9
0.0.10-alpha.5 0.0.10-alpha.4 0.0.10-alpha.3 0.0.10-alpha.2 0.0.10-alpha.1 0.0.9 0.0.9-rc.2 0.0.9-rc.1 0.0.9-beta.5 0.0.9-beta.4 0.0.9-beta.3 0.0.9-beta.2 0.0.9-beta.1 0.0.9-alpha.20 0.0.9-alpha.18 0.0.9-alpha.17 0.0.9-alpha.16 0.0.9-alpha.15 0.0.9-alpha.14 0.0.9-alpha.13 0.0.9-alpha.12 0.0.9-alpha.11 0.0.9-alpha.10 0.0.9-alpha.9 0.0.9-alpha.8 0.0.9-alpha.7 0.0.9-alpha.6 0.0.9-alpha.5 0.0.9-alpha.4 0.0.9-alpha.3 0.0.9-alpha.2 0.0.9-alpha.1 0.0.8 0.0.8-rc.2 0.0.8-rc.1 0.0.8-beta.5 0.0.8-beta.4 0.0.8-beta.3 0.0.8-beta.2 0.0.8-beta.1 0.0.8-alpha.4 0.0.8-alpha.3 0.0.8-alpha.2 0.0.8-alpha.1 0.0.7 0.0.6 0.0.6-alpha.2 0.0.6-alpha.1 0.0.5 0.0.5-beta.2 0.0.5-beta.1 0.0.5-alpha.12 0.0.5-alpha.11 0.0.5-alpha.10 0.0.5-alpha.9 0.0.5-alpha.8 0.0.5-alpha.7 0.0.5-alpha.6 0.0.5-alpha.5 0.0.5-alpha.4 0.0.5-alpha.3 0.0.5-alpha.2 0.0.5-alpha.1 0.0.4 0.0.4-beta.3 0.0.4-beta.2 0.0.4-beta.1 0.0.4-alpha.9 0.0.4-alpha.8 0.0.4-alpha.7 0.0.4-alpha.6 0.0.4-alpha.5 0.0.4-alpha.4 0.0.4-alpha.3 0.0.4-alpha.2 0.0.4-alpha.1 0.0.3 0.0.3-alpha.3 0.0.3-alpha.2 0.0.3-alpha.1 0.0.2 0.0.2-rc.2 0.0.2-rc.1 0.0.2-beta.4 0.0.2-beta.3 0.0.2-beta.2 0.0.2-beta.1 0.0.2-alpha.3 0.0.2-alpha.2 0.0.2-alpha.1 0.0.1

Mishka Chelekom is a fully featured components and UI kit library for Phoenix & Phoenix LiveView

HexDocs

Current section

Files

Jump to
Readme
91 Versions
10 Dependencies
Dependants
Files
Activity
mishka_chelekom usage-rules headless scroll_area.md
Raw

usage-rules/headless/scroll_area.md 

# scroll_area (headless)



An unstyled, accessible scrollable viewport: a structural overflow container with a focusable inner viewport for keyboard scrolling. Implements the [WAI-ARIA APG](https://www.w3.org/WAI/ARIA/apg/) "Scroll area" pattern. Ships no scrollbar styling — style the `chelekom-scroll_area*` classes and select the axis via `data-orientation`.



## Generate



```bash

mix mishka.ui.gen.headless scroll_area

```



Generates `lib/<app>_web/components/headless/scroll_area.ex`. No JS engine is wired by default (`hooks: []`, no scripts) — pure structural markup. A custom-scrollbar `ScrollArea` hook ships in the asset library (`priv/assets/js/scrollArea.js`) but is **optional** and **not** attached by the generated template; to get a draggable custom scrollbar you must wire it and supply the markup it expects yourself.



## Anatomy



Root is a `<div class="chelekom-scroll_area" data-orientation="...">` wrapping one focusable viewport part:



| Part | Element | `data-part` | Class | Source |

|------|---------|-------------|-------|--------|

| root | `div` | — | `chelekom-scroll_area` | always rendered |

| viewport | `div` | `viewport` | `chelekom-scroll_area__viewport` | always rendered; wraps `inner_block` (required) |



The viewport carries `tabindex="0"` so it is focusable and keyboard-scrollable.



## ARIA & keyboard



Lightweight pattern — no special roles/`aria-*` beyond the focusable viewport (`tabindex="0"`). Keyboard behavior is native browser scrolling of the focused viewport:



- **Arrow keys** — scroll the focused viewport.

- **PageUp / PageDown** — scroll by a page.



## State



No JS. Only state attribute is `data-orientation` on the root, rendered statically from the `orientation` assign (`vertical` | `horizontal` | `both`, default `vertical`). It's a value-bearing attribute (not a paired-presence toggle) and nothing toggles it at runtime — change it by re-rendering with a different `orientation` assign. Use it as a CSS selector to pick the scroll axis (e.g. `[data-orientation="horizontal"]`).



## Example



```heex

<.scroll_area id="changelog" orientation="vertical" class="h-64 w-80">

  <article>

    <h3>Release notes</h3>

    <p>… long content that overflows the viewport …</p>

  </article>

</.scroll_area>

```



Attrs: `id` (required), `orientation` (`"vertical"` | `"horizontal"` | `"both"`, default `"vertical"`), `class`, `rest` (global). Slot: `inner_block` (required) — the scrollable content, rendered inside the viewport.



## Styling



Ships **no** colors or sizing — not even an `overflow` rule. Give the root or viewport a fixed size and the overflow behavior you want via the `chelekom-scroll_area*` classes (`chelekom-scroll_area`, `__viewport`) plus `data-orientation`:



```css

.chelekom-scroll_area__viewport            { height: 100%; }

.chelekom-scroll_area[data-orientation="vertical"]   .chelekom-scroll_area__viewport { overflow-y: auto; }

.chelekom-scroll_area[data-orientation="horizontal"] .chelekom-scroll_area__viewport { overflow-x: auto; }

.chelekom-scroll_area[data-orientation="both"]       .chelekom-scroll_area__viewport { overflow: auto; }

```



Add your own classes to the root via `class`.