# Scroll Panel Use `ui-scroll-panel` when you need a reusable scroll shell for custom layouts, panels, drawers, or card regions and do not want the higher-level data-loading behavior of `ui-scroll-container`. ## Import ```ts import { ScrollPanelComponent } from 'ui'; ``` ## Basic scroll region ```ts import { Component } from '@angular/core'; import { ScrollPanelComponent } from 'ui'; @Component({ selector: 'app-scroll-panel-basic-demo', standalone: true, imports: [ScrollPanelComponent], template: `
@for (item of items; track item.id) {
{{ item.title }}
{{ item.body }}
}
`, }) export class ScrollPanelBasicDemoComponent { protected readonly items = Array.from({ length: 14 }, (_, index) => ({ id: index + 1, title: `Update ${index + 1}`, body: 'A basic vertical scroll region is useful for feeds, drawers, and side panels with constrained height.', })); } ``` ## Horizontal and bidirectional layouts ```ts import { Component } from '@angular/core'; import { ScrollPanelComponent } from 'ui'; @Component({ selector: 'app-scroll-panel-orientation-demo', standalone: true, imports: [ScrollPanelComponent], template: `
Horizontal strip
@for (item of horizontalItems; track item.id) {
{{ item.title }}
{{ item.body }}
}
Both directions
@for (item of canvasItems; track item.id) {
{{ item.title }}
{{ item.body }}
}
`, }) export class ScrollPanelOrientationDemoComponent { protected readonly horizontalItems = Array.from({ length: 8 }, (_, index) => ({ id: index + 1, title: `Preview ${index + 1}`, body: 'Useful for media strips, cards, or dense option galleries.', })); protected readonly canvasItems = Array.from({ length: 12 }, (_, index) => ({ id: index + 1, title: `Widget ${index + 1}`, body: 'Bidirectional scroll is useful only when the content truly needs two axes.', })); } ``` ## Scrollbar visibility behavior ```ts import { Component } from '@angular/core'; import { ScrollPanelComponent } from 'ui'; @Component({ selector: 'app-scroll-panel-scrollbar-behavior-demo', standalone: true, imports: [ScrollPanelComponent], template: `
@for (behavior of behaviors; track behavior) {
{{ behavior }}
@for (item of items; track item.id) {
{{ item.label }}
}
}
`, }) export class ScrollPanelScrollbarBehaviorDemoComponent { protected readonly behaviors = ['auto', 'always', 'never'] as const; protected readonly items = Array.from({ length: 10 }, (_, index) => ({ id: index + 1, label: `Scrollable row ${index + 1}`, })); } ``` ## Programmatic scrolling ```ts import { Component, signal, viewChild } from '@angular/core'; import { ButtonComponent, ScrollPanelComponent } from 'ui'; @Component({ selector: 'app-scroll-panel-programmatic-demo', standalone: true, imports: [ButtonComponent, ScrollPanelComponent], template: `
Top Bottom Right Last action: {{ lastAction() || 'none' }}
@for (item of items; track item.id) {
{{ item.title }}
{{ item.body }}
}
`, }) export class ScrollPanelProgrammaticDemoComponent { protected readonly panel = viewChild('panel'); protected readonly lastAction = signal(''); protected readonly items = Array.from({ length: 10 }, (_, index) => ({ id: index + 1, title: `Card ${index + 1}`, body: 'Programmatic scrolling is useful when the shell needs to jump to a region after an external action.', })); protected scrollToTop(): void { this.panel()?.scrollToTop(); this.lastAction.set('Scrolled to top'); } protected scrollToBottom(): void { this.panel()?.scrollToBottom(); this.lastAction.set('Scrolled to bottom'); } protected scrollToRight(): void { this.panel()?.scrollToRight(); this.lastAction.set('Scrolled to right edge'); } } ``` ## Scroll and scroll-end events ```ts import { Component, signal } from '@angular/core'; import { ButtonComponent, ScrollPanelComponent } from 'ui'; @Component({ selector: 'app-scroll-panel-events-demo', standalone: true, imports: [ButtonComponent, ScrollPanelComponent], template: `
Reset counters Top: {{ scrollTop() }}px Ended: {{ scrollEndCount() }}
@for (item of items; track item.id) {
{{ item.title }}
{{ item.body }}
}
`, }) export class ScrollPanelEventsDemoComponent { protected readonly scrollTop = signal(0); protected readonly scrollEndCount = signal(0); protected readonly items = Array.from({ length: 16 }, (_, index) => ({ id: index + 1, title: `Event row ${index + 1}`, body: 'Listening to scroll and scrollEnd is useful for analytics, sticky shell logic, or lazy UI reactions.', })); protected onScroll(event: Event): void { const target = event.target as HTMLElement; this.scrollTop.set(Math.round(target.scrollTop)); } protected onScrollEnd(): void { this.scrollEndCount.update(count => count + 1); } protected reset(): void { this.scrollTop.set(0); this.scrollEndCount.set(0); } } ``` ## Inbox or side-panel composition ```ts import { Component } from '@angular/core'; import { MessageBarComponent, ScrollPanelComponent, SearchComponent } from 'ui'; @Component({ selector: 'app-scroll-panel-inbox-layout-demo', standalone: true, imports: [MessageBarComponent, ScrollPanelComponent, SearchComponent], template: `
Inbox layout
A scroll panel is often just the scroll shell inside a denser composition with search and status.
@for (item of items; track item.id) {
{{ item.title }}
{{ item.body }}
}
`, }) export class ScrollPanelInboxLayoutDemoComponent { protected readonly items = Array.from({ length: 12 }, (_, index) => ({ id: index + 1, title: index % 2 === 0 ? `Review request ${index + 1}` : `Mention from design ${index + 1}`, body: 'This kind of panel usually needs one clearly bounded scroll area inside a bigger shell.', })); } ``` ## Accessibility ### Scrollable region semantics `ui-scroll-panel` renders a region with an accessible label. Supply a more specific `ariaLabel` when the generic scrollable-content wording is not enough for the surrounding UI. ### Keyboard behavior Keyboard behavior mainly follows native scroll container expectations. | Key | Action | | --- | --- | | Tab / Shift+Tab | Moves focus into or past interactive content inside the panel. | | Arrow keys / Page keys | Follow browser scrolling behavior when the region or an inner control has focus. | | Home / End | Can move to the start or end of scrollable content depending on browser and focus context. | ### Bounded scroll areas Keep only the intended region scrollable. Nested scroll areas become hard to operate if the panel is not clearly bounded or if its label does not explain what the user is scrolling.