Scroll View

Last edit: 2023.08.07

Scroll View is the area in which the content can be scrolled.

The control is shown when the content does not entirely fit the page or the viewport.


  1. Scroll view: The viewport within which the content can be scrolled (for example, app, panel).
  2. Fadeout effect: A visual cue that indicates that the content is scrollable. By default, it is displayed at the end of the scrolling direction of the Scroll View (for example, in vertical scrolling, fadeout is visible at the bottom of the Scroll View). When reaching the end, the fade-out effect is no longer shown. Optionally, this effect can be set from both sides of the Scroll View.


The fade-out effect is created with a gradient that interpolates from 0% to 100% with the color that matches the color of the background it is displayed on. The following size templates are used:

Size templateUse
NormalUsed to indicate scrolling in bigger scrollable views (for example, task panels, modal windows, etc.)
SmallUsed to indicate scrolling in smaller scrollable views (for example, home screen panels, pop-overs, etc.)


usage example1 thumbnail

Point of interest preview panel

Panel content is scrollable while buttons are docked to the bottom.

usage example2 thumbnail

Favourite locations panel

The list of locations is scrollable while the "Add favorite" button is docked to the bottom.


ThemingThe sizing of the fading effect can be adjusted.
ConfigurationsTwo size templates are supported.