Packages
mishka_chelekom
0.0.10-alpha.2
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
Current section
Files
Jump to
Current section
Files
usage-rules/components/scroll_area.md
# Scroll Area Component
Customizable scrollable container with styled scrollbars.
**Documentation**: https://mishka.tools/chelekom/docs/scroll-area
> **For LLM Agents**: If you need more details, examples, or edge cases not covered here, fetch the full documentation from the URL above.
## Generate
```bash
mix mishka.ui.gen.component scroll_area
```
## Dependencies
| Type | Components |
|------|------------|
| **Necessary** | None |
| **Optional** | None |
| **JavaScript** | `scrollArea.js` |
## Attributes
| Attribute | Type | Default | Description |
|-----------|------|---------|-------------|
| `id` | `:string` | **required** | Unique identifier |
| `type` | `:string` | `"auto"` | Scrollbar visibility (`hover`, `auto`, `never`) |
| `horizontal` | `:boolean` | `false` | Enable horizontal scrollbar |
| `vertical` | `:boolean` | `true` | Enable vertical scrollbar |
| `height` | `:string` | `"h-96"` | Container height |
| `width` | `:string` | `"w-full"` | Container width |
| `padding` | `:string` | `"extra_small"` | Content padding (`extra_small`, `small`, `medium`, `large`, `extra_large`, `none`) |
| `scrollbar_width` | `:string` | `"w-2"` | Vertical scrollbar width |
| `scrollbar_height` | `:string` | `"h-2"` | Horizontal scrollbar height |
## Slots
- `inner_block` — scrollable content.
## Usage Examples
### Basic / dimensions / scrollbar tuning
```heex
<.scroll_area id="content-scroll" height="h-64">
<p>Long content goes here...</p>
</.scroll_area>
<.scroll_area id="custom-scroll" height="h-48" width="w-96">
Content here...
</.scroll_area>
<.scroll_area id="hover-scroll" type="hover" height="h-64">
Scrollbar appears on hover
</.scroll_area>
<.scroll_area id="thick-scroll" scrollbar_width="w-3" height="h-64">
Content with thicker scrollbar
</.scroll_area>
```
### Horizontal only
```heex
<.scroll_area id="horizontal-scroll" horizontal vertical={false}>
<div class="flex gap-4 w-max">
<div :for={i <- 1..10} class="w-48 h-32 bg-gray-200 rounded">
Item {i}
</div>
</div>
</.scroll_area>
```
### Both directions
```heex
<.scroll_area id="both-scroll" horizontal vertical height="h-64" width="w-96">
<div class="w-[800px] h-[600px]">
Large content that scrolls both ways
</div>
</.scroll_area>
```
## Common Patterns
### Chat messages container
```heex
<.scroll_area id="chat-messages" height="h-96" class="border rounded-lg">
<div class="p-4 space-y-4">
<div :for={message <- @messages} class="flex gap-3">
<.avatar src={message.user.avatar} size="small" />
<div>
<p class="font-medium">{message.user.name}</p>
<p class="text-sm text-gray-600">{message.content}</p>
</div>
</div>
</div>
</.scroll_area>
```
### Code preview (horizontal + vertical)
```heex
<.scroll_area id="code-preview" horizontal vertical height="h-64" class="bg-gray-900 rounded-lg">
<pre class="p-4 text-sm text-gray-100 font-mono">
<code>{@code}</code>
</pre>
</.scroll_area>
```
### Sidebar navigation
```heex
<.scroll_area id="sidebar-nav" height="h-[calc(100vh-4rem)]" padding="small">
<nav class="space-y-2">
<a :for={item <- @nav_items} href={item.path} class="block p-2 rounded hover:bg-gray-100">
{item.label}
</a>
</nav>
</.scroll_area>
```