ScrollerView

Since 2.2.1

ScrollerView is a scrollable container. It wraps a viewContainer inside a viewPort and provides optional horizontal and vertical scroll bars that appear automatically when content overflows. Children added to a ScrollerView in code or XML are placed inside viewContainer.

Everything documented on UIElement (layout, styles, events, data bindings, etc.) applies here too.

Usage

JavaKotlinKubeJS

var sv = new ScrollerView();
sv.scrollerStyle(style -> style.mode(ScrollerMode.VERTICAL));
for (int i = 0; i < 20; i++) {
    sv.addScrollViewChild(new Label().setText("Item " + i, false));
}
parent.addChild(sv);

scrollerView({ scrollerViewStyle { mode(ScrollerMode.VERTICAL) } }) {
    for (i in 0 until 20) {
        label { api { setText("Item $i", false) } }
    }
}

let sv = new ScrollerView();
sv.scrollerStyle(style => style.mode(ScrollerMode.VERTICAL));
for (let i = 0; i < 20; i++) {
    sv.addScrollViewChild(new Label().setText("Item " + i, false));
}
parent.addChild(sv);

XML

<scroller-view>
    <label>Item 1</label>
    <label>Item 2</label>
    <label>Item 3</label>
</scroller-view>

Direct XML children are placed inside viewContainer.

Internal Structure

CSS class	Description
`.__scroller_view_vertical-container__`	Row flex container holding `viewPort` and the vertical scroller.
`.__scroller_view_view-port__`	Clipping viewport with default 5 px padding and border texture.
`.__scroller_view_view-container__`	The actual content container where children are placed.
`.__scroller_view_vertical-scroller__`	Vertical scroll bar (right side).
`.__scroller_view_horizontal-scroller__`	Horizontal scroll bar (bottom).

ScrollerView Style

scroller-view-mode

Which scroll axes are enabled. Values: HORIZONTAL, VERTICAL, BOTH.

Default: BOTH

JavaLSS

sv.scrollerStyle(style -> style.mode(ScrollerMode.VERTICAL));

scroller-view {
    scroller-view-mode: VERTICAL;
}

scroller-vertical-display / scroller-horizontal-display

Visibility policy for each scroll bar. Values: AUTO (show only when content overflows), ALWAYS, NEVER.

Default: AUTO

JavaLSS

sv.scrollerStyle(style -> style
    .verticalScrollDisplay(ScrollDisplay.ALWAYS)
    .horizontalScrollDisplay(ScrollDisplay.NEVER)
);

scroller-view {
    scroller-vertical-display: ALWAYS;
    scroller-horizontal-display: NEVER;
}

scroller-view-margin

Right margin reserved for the horizontal scroller when the vertical scroller is also visible.

Default: 5

LSS

scroller-view {
    scroller-view-margin: 5;
}

adaptive-width / adaptive-height

When enabled, the ScrollerView resizes itself to match the content container's computed width or height.

Default: false

JavaLSS

sv.scrollerStyle(style -> style.adaptiveHeight(true));

scroller-view {
    adaptive-height: true;
}

min-scroll / max-scroll

Clamp bounds (in pixels) on how far the scroll bar thumb travels per scroll event.

Defaults: 5 / 7

JavaLSS

sv.scrollerStyle(style -> style.minScrollPixel(0f).maxScrollPixel(20f));

scroller-view {
    min-scroll: 0;
    max-scroll: 20;
}

Fields

Name	Type	Access	Description
`viewContainer`	`UIElement`	`public final`	Container holding all added children.
`viewPort`	`UIElement`	`public final`	Clipping region (has border texture and padding).
`verticalContainer`	`UIElement`	`public final`	Row flex container wrapping `viewPort` and `verticalScroller`.
`horizontalScroller`	`Scroller.Horizontal`	`public final`	Horizontal scroll bar.
`verticalScroller`	`Scroller.Vertical`	`public final`	Vertical scroll bar.

Methods

Method	Returns	Description
`addScrollViewChild(UIElement)`	`ScrollerView`	Adds a child to `viewContainer`.
`addScrollViewChildAt(UIElement, int)`	`ScrollerView`	Inserts a child at a specific index in `viewContainer`.
`addScrollViewChildren(UIElement...)`	`ScrollerView`	Adds multiple children to `viewContainer`.
`removeScrollViewChild(UIElement)`	`boolean`	Removes a child from `viewContainer`.
`clearAllScrollViewChildren()`	`void`	Removes all children from `viewContainer`.
`hasScrollViewChild(UIElement)`	`boolean`	Returns `true` if the element is a child of `viewContainer`.
`getContainerWidth()`	`float`	Computed content width (includes overflowing children).
`getContainerHeight()`	`float`	Computed content height (includes overflowing children).
`scrollerStyle(Consumer<ScrollerViewStyle>)`	`ScrollerView`	Configures the style fluently.
`viewContainer(Consumer<UIElement>)`	`ScrollerView`	Configures `viewContainer`.
`viewPort(Consumer<UIElement>)`	`ScrollerView`	Configures `viewPort`.
`verticalContainer(Consumer<UIElement>)`	`ScrollerView`	Configures `verticalContainer`.
`horizontalScroller(Consumer<Scroller>)`	`ScrollerView`	Configures the horizontal scroll bar.
`verticalScroller(Consumer<Scroller>)`	`ScrollerView`	Configures the vertical scroll bar.