Skip to main content

ScrollContainer

ScrollContainer clips a vertically translated content group and draws a focus-aware scrollbar. Use it when a page needs its specific step, long-press, and scrollbar behavior.

It does not stack children itself. Wrap stacked content in VGroup, or give children explicit translations:

ScrollContainer([
  VGroup([
    Label({ text: 'Overview' }),
    Label({ text: longDescription, wrap: true, width: 640 }),
    Button({ text: 'Continue' }),
  ]).itemSpacing(24),
])
  .id('detailsScroll')
  .width(700)
  .viewportHeight(420)
  .scrollStep(40)
  .scrollDuration(250);

Set viewportHeight for overflow, scrollbar, and scroll-bound calculations. When height is zero, it also becomes the measured height. Width can be explicit or can grow to the furthest child extent.

Input behavior​

Up and Down presses move by scrollStep. Long press animates toward the top or bottom at twice the single-step speed; release stops the animation and records the rendered position. Scrollbar visibility depends on content overflow, while its colors reflect whether the container is in the focus chain.

Programmatic scrolling​

Look up the mounted ScrollContainerView:

const scroll = this.getSubView<ScrollContainerView>('detailsScroll', true);

scroll?.scrollToTop();
scroll?.scrollTo([0, -200], 400);
scroll?.scrollToBottom();
scroll?.reset();

Scrolling is vertical only. The x value is ignored; y is the content translation, so 0 is the top and a negative value moves farther down the content. reset() jumps immediately, while the other methods animate.

Scrollbar fields​

The thumb uses scrollbarUri, scrollbarWidth, scrollbarXOffset, scrollbarYTopOffset, scrollbarYBottomOffset, scrollbarFocusColor, scrollbarUnfocusColor, and optional maxScrollBarHeight.

The track has corresponding scrollbarBackground* URI, width, offset, and focus/unfocus color fields.

Use ScrollView for its broader pointer/wheel alignment options. Use a data/list surface for large, recyclable item sets.

Talk to us