# Scroll area · MIAN

A scrolling region with thin scrollbars and shadows that appear only where more content is hidden.

- Id: `scroll-area` · Category: Layout & utilities · Needs mian.js: no · License: MIAN License (free to use)
- Docs: https://mian.ro/components/scroll-area
- Use for: scrollable panel, overflow region, scroll shadows.

Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate.

## Install

```html
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
```

## Classes

- `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.

## Examples

### Release notes

```html
<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>
```

## Source

Already inside mian.css; you do not need it to use the component. To vendor or customise: https://mian.ro/api/v1/components/scroll-area/source