ScrollPanel

New

Keep rich content within reach, in a scrollable space that fits your layout.

Custom scrollbarsBoth axesKeyboard accessible

Basic

Scroll with a wheel or touch, drag the thumb, or focus a scrollbar and use the arrow keys.

CHAPTER 01

Define a clear direction

Start with the people who will use your product. Understand their needs, write down the problem and agree on what a useful outcome looks like.

CHAPTER 02

Make space for exploration

Explore a few different approaches before choosing a direction. Sketch early, ask questions and give promising ideas time to develop.

CHAPTER 03

Build with your team

Bring design and engineering together. Small, frequent conversations help everyone understand the decisions behind the work.

CHAPTER 04

Review the details

Test the experience with real content. Check the smaller screens, keyboard navigation and the details that make everyday tasks feel effortless.

CHAPTER 05

Share what you learned

Capture the decisions and share your findings. A thoughtful handover gives the next person a clear place to start.

Custom and dynamic

Change the scrollbar colors with CSS tokens. Add content to see the thumb update automatically.

1

Define a clear direction

Workspace update · Design studio

2

Make space for exploration

Workspace update · Design studio

3

Build with your team

Workspace update · Design studio

4

Review the details

Workspace update · Design studio

5

Share what you learned

Workspace update · Design studio

Horizontal and vertical

A wide board can overflow in both directions. Each scrollbar controls its own axis.

Discovery

TASK 01Discovery milestone 1

Keep the next step clear and actionable.

TASK 02Discovery milestone 2

Keep the next step clear and actionable.

TASK 03Discovery milestone 3

Keep the next step clear and actionable.

TASK 04Discovery milestone 4

Keep the next step clear and actionable.

Design

TASK 01Design milestone 1

Keep the next step clear and actionable.

TASK 02Design milestone 2

Keep the next step clear and actionable.

TASK 03Design milestone 3

Keep the next step clear and actionable.

TASK 04Design milestone 4

Keep the next step clear and actionable.

Development

TASK 01Development milestone 1

Keep the next step clear and actionable.

TASK 02Development milestone 2

Keep the next step clear and actionable.

TASK 03Development milestone 3

Keep the next step clear and actionable.

TASK 04Development milestone 4

Keep the next step clear and actionable.

Review

TASK 01Review milestone 1

Keep the next step clear and actionable.

TASK 02Review milestone 2

Keep the next step clear and actionable.

TASK 03Review milestone 3

Keep the next step clear and actionable.

TASK 04Review milestone 4

Keep the next step clear and actionable.

Launch

TASK 01Launch milestone 1

Keep the next step clear and actionable.

TASK 02Launch milestone 2

Keep the next step clear and actionable.

TASK 03Launch milestone 3

Keep the next step clear and actionable.

TASK 04Launch milestone 4

Keep the next step clear and actionable.

Usage and API

Import AvScrollPanel from avero-ui and set a height for the scrollable area.

HTML

<av-scroll-panel inputId="notes" ariaLabel="Project notes"
  style="width: 100%; height: 280px">
  <p>Your content goes here.</p>
</av-scroll-panel>

Content. Supply a unique inputId and an ariaLabel or ariaLabelledBy. Content is projected normally. Resize and content observers update the scrollbars automatically. Call refresh() after external layout changes that are not observed, such as changing the inherited text direction.

Control. scrollTo(options) accepts native ScrollToOptions, including top, left and behavior. Smooth scrolling respects reduced-motion preferences. onScroll emits originalEvent, scrollTop and scrollLeft in pixels. Horizontal coordinates follow browser conventions, including negative left values in RTL.

Keyboard. Focus the viewport for native scrolling, or a scrollbar for arrows, PageUp/PageDown and Home/End. step sets the arrow increment in pixels (default 40). Customize horizontalLabel and verticalLabel for accessible scrollbar names.

Styling. Use --av-scroll-panel-bar-size, --av-scroll-panel-bar-radius, --av-scroll-panel-track-background, --av-scroll-panel-bar-background, --av-scroll-panel-bar-hover and --av-scroll-panel-focus. Space for both tracks is reserved to avoid layout shifts.