Scroll Viewer

When you want to keep your user interface small but need to present a lot of information, you can use the ScrollViewer to contain it.

Expand.

It consists of vertical and horizontal scroll bars and a viewing area. The information you want to present is created as a control that you add to the scroll viewer and display in the viewing area. If the control fits inside the scroll viewer, no scroll bars are shown.

From Babylon.js version 4.1 onward, it is possible to use an image for the thumb control and the bars.

Expand.

Creating the Scroll Viewer

The scroll viewer base is a rectangle container that holds the scroll bars and the viewing area. You can create it with or without a name.

import { ScrollViewer } from "@babylonjs/gui/2D/controls/scrollViewers/scrollViewer";
const myScrollViewer = new ScrollViewer();
// OR
const myScrollViewer = new ScrollViewer("name");

Then add it to an advanced texture as usual.

import { AdvancedDynamicTexture } from "@babylonjs/gui/2D/advancedDynamicTexture";
const myAdvancedTexture = AdvancedDynamicTexture.CreateFullscreenUI("UI");
myAdvancedTexture.addControl(myScrollViewer);

You can then create your control or container of controls to add to the scroll viewer using the addControl method.

myScrollViewer.addControl(myControl);

• Scroll Viewer Example

The default width and height of the scroll viewer are 100% of the parent control.

The following table shows the additional properties of a scroll viewer.

NOTE All padding values for the scroll viewer are set to 0. Any padding should be set on the control added to the scroll viewer.

• Scroll Viewer of Fixed Size
• Scroll Viewer of Relative Size

Scrollbars

Both scrollbars can be reached with:

• horizontalBar
• verticalBar

You can then set the scrollbar position with scrollViewer.horizontalBar.value. This value must be between 0 and 1.

Image Scrollbars

To use images in the scroll bar, you need to pass a name (which can be an empty string) and a true parameter when creating the scroll viewer.

import { ScrollViewer } from "@babylonjs/gui/2D/controls/scrollViewers/scrollViewer";
const myScrollViewer = new ScrollViewer("", true);

Additional properties are available.

You do not have to have a barImage.

The images for the vertical bar and thumb are by default rotated copies of those used for the horizontal bar and thumb. You may want to keep the image sizes small if memory is an issue in your project.

You can also choose to have different images for the vertical and horizontal bar / thumb. In that case, use horizontalThumbImage / verticalThumbImage instead of thumbImage and horizontalBarImage / verticalBarImage instead of barImage.

• Image Scroll Bars
• Image Scroll Bars in a Grid

Adding an Adjustable TextBlock Window

When you add a TextBlock of a given size to a scroll viewer, both horizontal and vertical scroll bars are shown as needed.

Expand

• Scroll Viewer with Fixed TextBlock

However, you will often need to present text that fits the width of the viewing window and scrolls vertically. This is achieved by setting textWrapping and resizeToFit as follows:

import { TextWrapping } from "@babylonjs/gui/2D/controls/textBlock";
myTextBlock.textWrapping = TextWrapping.WordWrap;
myTextBlock.resizeToFit = true;

Expand

• Scroll Viewer with Adjusting TextBlock

Live-Updating and Child Containers

The ScrollViewer accepts only ONE child control. If that single child is a textBlock, then you can modify its .text property (including \n linebreaks), to add/remove text content to/from that single textBlock.

The ScrollViewer also accepts a single CONTAINER (such as a stackpanel) for its single child. In that container, you may add/remove any type of control(s). For certain types of containers, you might choose to add container.ignoreLayoutWarnings = true;, and you might need to set a non-percentage height value to certain children within the container(s).

Rendering optimization

If you have a lot of controls in your scroll viewer window, you may notice slower rendering.

To help improve your FPS, you can set myScrollViewer.freezeControls = true. This "freezes" the controls in their current positions in the window and makes rendering faster when the window is scrolled. When controls are frozen, changing their position or size may not work, so if you need to do that, first set freezeControls to false, make your changes, then set freezeControls back to true.

You can further improve the rendering time by using the setBucketSizes method:

myScrollViewer.setBucketSizes(100, 40);

When freezeControls is true, setting a non-zero bucket size improves performance by updating only visible controls. Bucket sizes are used to subdivide the window area internally into smaller areas to which controls are assigned. So, the size should be roughly equal to the average size of the controls inside the window. To disable buckets, set either width or height (or both) to 0.

Please note that using this option increases memory usage (the higher the bucket sizes, the less memory is used), which is why it is not enabled by default.

You can also use the ScrollViewer.forceHorizontalBar and ScrollViewer.forceVerticalBar properties.

When set to true, they force the display of the corresponding bars. When you know your scroll viewer will end up with visible bars, you can set these properties to true to save some initialization time, because if the scroll viewer itself makes a bar visible during initialization, it triggers a child layout rebuild and adds more time to the initialization process.

Further reading

Selector

Learn about the selector in Babylon.js.

The Babylon GUI

Learn all about the Babylon.js 2D GUI system.

XML Loader

Learn about the Babylon.js XML Loader.

Babylon 3D GUI

Learn all about the Babylon.js 3D GUI System.