scroll-area
Apply .scroll-area to a bounded semantic region. Add tabindex="0" when the
region should be directly reachable by keyboard.
<section class="scroll-area" tabindex="0" aria-label="Release notes">
<p>Scrollable content goes here.</p>
</section>
The browser owns keyboard, wheel, touch, pointer, RTL, and scrollbar behavior. AngularTS may add or remove content; native layout updates overflow geometry.
Example
View source
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>AngularCSS Scroll Area</title>
<link rel="stylesheet" href="../../css/preflight.css" />
<link rel="stylesheet" href="../../css/angular.css" />
<link rel="stylesheet" href="../example.css" />
<script src="../../js/angular-ts.umd.js"></script>
<script src="../../js/angular-css.umd.js"></script>
</head>
<body ng-app="angular.css" ng-cloak>
<section
class="scroll-demo scroll-area"
tabindex="0"
aria-label="Release tags"
>
<div class="stack-sm" style="padding: 16px; min-width: 34rem">
<h3>Tags</h3>
<span>v1.2.0-beta.50</span>
<hr />
<span>v1.2.0-beta.49</span>
<hr />
<span>v1.2.0-beta.48</span>
<hr />
<span>v1.2.0-beta.47</span>
<hr />
<span>v1.2.0-beta.46</span>
<hr />
<span>v1.2.0-beta.45</span>
</div>
</section>
</body>
</html>
Workflows
View source
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>AngularCSS Scroll Area Workflows</title>
<link rel="stylesheet" href="../../css/preflight.css" />
<link rel="stylesheet" href="../../css/angular.css" />
<link rel="stylesheet" href="../example.css" />
<script src="../../js/angular-ts.umd.js"></script>
<script src="../../js/angular-css.umd.js"></script>
</head>
<body
ng-app="angular.css"
ng-cloak
ng-init="showOverflow = false; scrollDirection = 'rtl'"
data-example="scroll-area-demo scroll-area-horizontal-demo scroll-area-rtl"
>
<main class="scroll-area-workflows visual-example">
<section
class="scroll-area-workflow"
aria-labelledby="scroll-tags-heading"
>
<h2 id="scroll-tags-heading">Tags</h2>
<section
class="scroll-area scroll-area-tags"
id="vertical-scroll-area"
tabindex="0"
aria-label="Release tags"
>
<div class="scroll-tag-list">
<span>v1.2.0-beta.50</span>
<hr />
<span>v1.2.0-beta.49</span>
<hr />
<span>v1.2.0-beta.48</span>
<hr />
<span>v1.2.0-beta.47</span>
<hr />
<span>v1.2.0-beta.46</span>
<hr />
<span>v1.2.0-beta.45</span>
<hr />
<span>v1.2.0-beta.44</span>
<hr />
<span>v1.2.0-beta.43</span>
<hr />
<span>v1.2.0-beta.42</span>
<hr />
<span>v1.2.0-beta.41</span>
<hr />
<span>v1.2.0-beta.40</span>
<hr />
<span>v1.2.0-beta.39</span>
</div>
</section>
</section>
<section
class="scroll-area-workflow"
aria-labelledby="scroll-art-heading"
>
<h2 id="scroll-art-heading">Artwork</h2>
<section
class="scroll-area scroll-area-artwork"
id="horizontal-scroll-area"
tabindex="0"
aria-label="Featured artists"
>
<div class="scroll-artwork-row">
<figure>
<img
src="../../images/avatars/01.png"
alt="Portrait by Ornella Binni"
/>
<figcaption>Photo by <strong>Ornella Binni</strong></figcaption>
</figure>
<figure>
<img
src="../../images/avatars/02.png"
alt="Portrait by Tom Byrom"
/>
<figcaption>Photo by <strong>Tom Byrom</strong></figcaption>
</figure>
<figure>
<img
src="../../images/avatars/03.png"
alt="Portrait by Vladimir Malyavko"
/>
<figcaption>
Photo by <strong>Vladimir Malyavko</strong>
</figcaption>
</figure>
<figure>
<img
src="../../images/avatars/04.png"
alt="Portrait by Sarah Chen"
/>
<figcaption>Photo by <strong>Sarah Chen</strong></figcaption>
</figure>
</div>
</section>
</section>
<section
class="scroll-area-workflow"
aria-labelledby="scroll-dynamic-heading"
>
<header>
<h2 id="scroll-dynamic-heading">Dynamic content</h2>
<button
type="button"
variant="outline"
size="sm"
ng-click="showOverflow = !showOverflow"
>
{{ showOverflow ? 'Remove content' : 'Add content' }}
</button>
</header>
<section
class="scroll-area scroll-area-dynamic"
id="dynamic-scroll-area"
tabindex="0"
aria-label="Dynamic release notes"
>
<div class="scroll-dynamic-content">
<p>Current release</p>
<div ng-if="showOverflow" class="scroll-dynamic-overflow">
<p>Compatibility notes</p>
<p>Migration details</p>
<p>API changes</p>
<p>Resolved issues</p>
</div>
</div>
</section>
</section>
<section
class="scroll-area-workflow"
aria-labelledby="scroll-rtl-heading"
dir="rtl"
lang="ar"
>
<header>
<h2 id="scroll-rtl-heading">العلامات</h2>
<button
type="button"
variant="outline"
size="sm"
ng-click="scrollDirection = scrollDirection === 'rtl' ? 'ltr' : 'rtl'"
>
Change direction
</button>
</header>
<section
class="scroll-area scroll-area-tags"
id="rtl-scroll-area"
dir="{{ scrollDirection }}"
tabindex="0"
aria-label="علامات الإصدار"
>
<div class="scroll-tag-list">
<span>v1.2.0-beta.50</span>
<hr />
<span>v1.2.0-beta.49</span>
<hr />
<span>v1.2.0-beta.48</span>
<hr />
<span>v1.2.0-beta.47</span>
<hr />
<span>v1.2.0-beta.46</span>
<hr />
<span>v1.2.0-beta.45</span>
<hr />
<span>v1.2.0-beta.44</span>
<hr />
<span>v1.2.0-beta.43</span>
</div>
</section>
</section>
</main>
</body>
</html>
Installation
Load the AngularCSS stylesheet. This entry needs no AngularCSS JavaScript or angular.css module dependency. Add AngularTS when using application bindings such as ng-model or ng-click. See Installation for the complete setup.
This entry uses native HTML and CSS. AngularCSS registers no runtime directive for it. Native overflow and scrolling.
Anatomy
Root styling selector
.scroll-area
Semantic structure
Use semantic HTML with the root styling selector above. Native elements provide the structure; the stylesheet supplies presentation.
API
Attributes and state
| Attribute | Access | Purpose |
|---|---|---|
dir | Authored | Text and interaction direction: ltr or rtl. |
tabindex | Authored | Use 0 when the overflow region itself must be reachable by keyboard. |
Attributes remain authored HTML, native state, or AngularTS inputs. AngularCSS does not write element state.
CSS custom properties
This styling hook does not define component-specific CSS custom properties.
DOM events
This component does not emit a component-specific custom event.
Native DOM events continue to work normally. AngularTS event directives such as
ng-click and ng-keydown, plus the data-change model callback, remain application-owned.
Behavior
A focusable semantic region with overflow: auto uses the browser’s native scrolling, keyboard behavior, pointer interaction, direction handling, and scrollbar geometry. AngularTS may insert or remove content; native layout updates the overflow automatically. AngularCSS registers no scroll-area directive.
AngularCSS does not replace AngularTS interpolation, bindings, structural directives, form controllers, validation, or application state.
Accessibility
Prefer semantic landmarks and native elements inside the layout. Any interactive handles or triggers must retain an accessible name and visible focus indicator.
Authored accessible names and relationships are preserved. Test the final composition with keyboard navigation and assistive technology because labels and content come from the application.
Customization
Target semantic elements, native state selectors, and component classes with ordinary CSS. Behavior and accessible state remain with native HTML and AngularTS; visual choices belong in the application stylesheet.
Read Customization for layer order, design tokens, state variants, and iframe demo isolation.
Feedback
Was this page helpful?
Glad to hear it! Please tell us how we can improve.
Sorry to hear that. Please tell us how we can improve.