ScrollArea

Keep long content in a bounded, keyboard-accessible scroll viewport.

Category: Layout and content
Import: @neural-ui/core/panel
Selector: neu-scroll-area

import { NeuScrollAreaComponent } from '@neural-ui/core/panel';

Usage

Native scrolling is the default. Set maxHeight and optionally maxWidth using CSS dimensions. enhanced adds themed scrollbars while retaining wheel, touch and native scrolling. variant controls track visibility; mask adds edge fades. ariaLabel names the viewport, tabindex controls focus and step controls enhanced scrollbar movement. scrollTo() can return to the start; scrollPositionChange reports observed dimensions and offsets.

Examples

Try the behavior and open Code for the implementation.

Order 1 — Ready for dispatch
Order 2 — Ready for dispatch
Order 3 — Ready for dispatch
Order 4 — Ready for dispatch
Order 5 — Ready for dispatch
Order 6 — Ready for dispatch
Order 7 — Ready for dispatch
Order 8 — Ready for dispatch
Order 9 — Ready for dispatch
Order 10 — Ready for dispatch
Order 11 — Ready for dispatch
Order 12 — Ready for dispatch

Vertical position: 0

Try and configure

Change the options and try the result. The generated template follows your configuration; Code contains the complete executable source.

Order 1 — Ready for dispatch
Order 2 — Ready for dispatch
Order 3 — Ready for dispatch
Order 4 — Ready for dispatch
Order 5 — Ready for dispatch
Order 6 — Ready for dispatch
Order 7 — Ready for dispatch
Order 8 — Ready for dispatch
Order 9 — Ready for dispatch
Order 10 — Ready for dispatch
Order 11 — Ready for dispatch
Order 12 — Ready for dispatch

Vertical position: 0

Maximum height

Maximum width (optional)

Accessible name

Scrollbar step (px)

Tab index (0 or -1)

Enhanced scrollbars

Edge masks

Wide content

<neu-scroll-area
  maxHeight="200px"
  [enhanced]="false"
  [mask]="true"
  variant="auto"
  [step]="40"
  [tabindex]="0"
  ariaLabel="Recent orders"
  (scrollPositionChange)="position.set($event)"
>
  <ol>
    @for (n of entries; track n) {
      <li>Order {{ n }}</li>
    }
  </ol>
</neu-scroll-area>

Data and content

Content belongs to default projection. scrollPositionChange reports scroll observations, not a controlled value proposal. Its left offset is logical and normalized for RTL. Call scrollTo() to scroll the viewport from your application.

Accessibility and keyboard

Give scrollable content an ariaLabel so the focusable viewport is a named region. Arrow/Page keys retain native viewport scrolling. Enhanced tracks expose scrollbar roles, controlled viewport IDs and current/minimum/maximum values. Keep tabindex at 0 when keyboard users need access.

Key	Action
`Tab`	Focus the named scroll viewport and its interactive content.
`Arrow keys`	Scroll the focused viewport using native browser behaviour.
`PageUp / PageDown`	Scroll the focused viewport a page at a time.

API

Inputs and Outputs match the pinned package. Named types link to their definitions; each supported Template has an executable example.

Inputs

Configure the component with [property]="value". Your application supplies these values; the component does not replace the state you pass in.

Name	Type	Default	Template binding	Description
`ariaLabel`	`string`	`''`	`[ariaLabel]`	Accessible name of the scroll viewport.
`enhanced`	`boolean`	`false`	`[enhanced]`	Enable themed scrollbar tracks; native scrolling remains.
`mask`	`boolean`	`true`	`[mask]`	Fade viewport edges where more content is available.
`maxHeight`	`string`	`'240px'`	`[maxHeight]`	Maximum viewport height as a CSS dimension.
`maxWidth`	`string \| null`	`null`	`[maxWidth]`	Optional maximum viewport width as a CSS dimension.
`step`	`number`	`40`	`[step]`	Movement in pixels for enhanced track controls.
`tabindex`	`number`	`0`	`[tabindex]`	Viewport tab index, usually 0 or -1.
`variant`	`NeuScrollAreaVariant`	`'auto'`	`[variant]`	Visibility policy of enhanced tracks.

Outputs

Listen to an event with (event)="handler($event)". The table explains the data your handler receives and how to use it.

Name	Payload	Template binding	Description
`scrollPositionChange`	`NeuScrollPosition`	`(scrollPositionChange)="onScrollPositionChange($event)"`	Reports observed top/left and scroll/client dimensions.

Templates

ng-content projects content into the component. TemplateRef inputs receive a template; ng-template directives identify templates with a typed context. A directive shared by an entrypoint is not necessarily a slot of this component.

Name	Mechanism	Contract
`*` Scrollable viewport content View example	Content projection Project text, lists or controls inside the bounded native viewport.	`<ng-content />` Context used: `—`

Each example demonstrates a different template. Switch between Demo and Code to inspect its implementation, imports and state.