Scroll Area
Scroll Area is a native web component that creates a scroll area with a thin, themed scrollbar that is consistent across browsers. Use it when you need to cap the height of a content block (lists, long text, menus) and make the overflow scrollable without losing the library's visual style. The viewport is focusable and shows an accessible focus ring.
Preview
<pura-scroll-area height="12rem">
<h3 style="margin:0 0 .5rem">Terms of use</h3>
<p>By using this service, you agree to the conditions described below.</p>
<p>The content provided is for informational purposes and may be updated at any time.</p>
<p>Personal data is handled in accordance with applicable data protection laws.</p>
<p>Cookies are used to improve the browsing experience on the platform.</p>
<p>If you have any questions, please contact our support team.</p>
<p>These terms may be revised periodically without prior notice.</p>
</pura-scroll-area>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
height | string (CSS length) | 18rem | Sets the maximum height of the viewport (any CSS unit); without it, defaults to 18rem. |
horizontal | boolean | false | When present, enables horizontal scrolling; otherwise horizontal overflow is hidden. |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/scroll-area.js"></script>import "./pura/lib/scroll-area.js";