Scroller

Overview

By leveraging Nova's input system, the Scroller component provides a refined scrolling solution out of the box. Scrollers can be used on any UIBlock with Auto Layout enabled, including virtualized ListViews and GridViews, and support a variety of features:

  • Mouse wheel and joystick scrolling
  • Drag scrolling (e.g. with touch and XR-hands)
  • Inertial scrolling
  • Edge-bounce effects
  • Scrollbar

Scrollbar

Basics

A scrollbar visual can be added to any Scroller by assigning a UIBlock in the scene to its Scrollbar Visual property. As content is scrolled, the Scroller will adjust the Size and Position of its Scrollbar Visual proportionally to the Scroller's attached UIBlock's size and position within the scrollable content.

If the Scroller is on a ListView or GridView, the Size and Position of the Scrollbar Visual will be based on the virtual size and position of the entire data collection.

When modifying the Size and Position of the Scrollbar Visual, only the properties along the scroll-axis (i.e. the Scroller's Auto Layout.Axis) are modified.

Note

The Size and Position of the Scrollbar Visual are relative to the Scrollbar Visual's Parent's PaddedSize, not the Scroller's Parent — although they may be one and the same.

Warning

Because the Scroller requires its attached UIBlock to have Auto Layout enabled, the Scrollbar Visual should not be a child of the Scroller.

Draggable Scrollbar

The Scroller can automatically handle Scrollbar Visual drag events by setting its DraggableScrollbar property to true.

Having a draggable scrollbar also requires:

NOTE

For more manual control over user-input-driven scrollbar adjustments, the Scroller exposes DragScrollbarToPosition:

private void HandleScrollbarTrackPressed(Gesture.OnPress evt)
{
   // Move the scrollbar to the pressed position 
   // and scroll the content accordingly
   scroller.DragScrollbarToPosition(evt.PointerWorldPosition);
}