Scroll area
A scrolling region with thin scrollbars and shadows that appear only where more content is hidden.
Release notes
1.3
More noodles and components
1.2
Design languages for every noodle
1.1
Contact form and admin
1.0
The component library
0.9
Noodles become design languages
0.8
Charts
0.7
First public version
<div class="mn-scroll-area" tabindex="0" role="region" aria-label="Release notes" style="--h:13rem;max-width:24rem">
<div class="mn-card-body">
<p style="margin:0 0 .9rem"><strong>1.3</strong><br><span class="mn-muted">More noodles and components</span></p>
<p style="margin:0 0 .9rem"><strong>1.2</strong><br><span class="mn-muted">Design languages for every noodle</span></p>
<p style="margin:0 0 .9rem"><strong>1.1</strong><br><span class="mn-muted">Contact form and admin</span></p>
<p style="margin:0 0 .9rem"><strong>1.0</strong><br><span class="mn-muted">The component library</span></p>
<p style="margin:0 0 .9rem"><strong>0.9</strong><br><span class="mn-muted">Noodles become design languages</span></p>
<p style="margin:0 0 .9rem"><strong>0.8</strong><br><span class="mn-muted">Charts</span></p>
<p style="margin:0 0 .9rem"><strong>0.7</strong><br><span class="mn-muted">First public version</span></p>
</div>
</div>Installation
Everything ships in one stylesheet. There is nothing to import per component.
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">Prefer to own the files? /r/scroll-area.json is a registry item with this component's CSS and example markup, ready to copy into your project with any tool that reads the open registry-item format.
Class reference
| Class / attribute | Description |
|---|---|
| mn-scroll-area | The region. Set --h for its maximum height. |
| mn-scroll-area-x | Horizontal scrolling. |
Accessibility
- Make it focusable (tabindex="0") with role="region" and an aria-label so keyboard users can scroll it.
- The shadows are pure CSS (background-attachment: local), no script, no layout shift.