Skip to main content
Version: 4.55.1

UI Scroll View

UI Scroll View​

The UI Scroll View is a Custom Component introduced in Lens Studio 4.49 that allows you to scroll one screen transform within the bounds of another. The UI Scroll View can be used when content that takes up a lot of space needs to be displayed in a small area. Some examples of this may include a map, a long block of text or a long list of items.

It leverages the Masking component to clip content visuals to a scroll view screen transform.

Installing​

Before getting started, You will need to make sure you have Lens Studio 4.49 or later installed.

The UI Scroll View custom component can be found in Lens Studio Asset Library

In the Asset Library, type in UI Scroll View in the Search field of Asset Library, navigate to the UI Scroll View asset and click Install.

Adding To Scene​

The UI Scroll View component works with Screen Transforms and has to be added to either Orthographic Camera or Canvas hierarchy.

  1. in the Objects Panel, Click + to add a new object and select Screen Transform.
  2. Rename the newly created Scene Transform object to My Scroll View.
  3. With the Scene Transform object selected, left click on the Add Component button in the Inspector panel and select Scroll View

Next, you will need an object that will scroll. In this guide, you will use a Screen Text object.

  1. With the My Scroll View scene object selected add new Screen Text in the Objects panel,

  1. Set newly created Screen Text object to the Content input field in the UI Scroll View custom component, by clicking on the Scene Text object and dragging to the Content input field.

Lastly, you will make your Content rectangle bigger than the UI Scroll View rectangle and set the UI Scroll view to wrap the text.

  1. Click and drag screen transform handles for the content in the 2D scene view to a larger rectangle.
  2. To verify it's working properly, set text field of Text component to a much longer set of text.
  3. In the Inspector Panel, click on the UI Set Horizontal Overflow to Wrap

Once you have your set up ready as shown on the image below you should be able to interact with UI Scroll View component in the Preview Panel.

Parent all objects you need to mask under the Content object and make sure its Screen Transform rectangle fits all the children visuals.

Customizing Settings​

UI Scroll View comes up with a set of options. Select Scene Object with the UI Scroll View custom component added and check them out in the Inspector panel:

Content: A content scene object to scroll

  • Has to be a child of a UI Scroll View object
  • Its rectangle to be bigger than UI Scroll View rectangle

Use mask: Creates Masking Component to occlude mesh visuals parented to the Content Scene object within the bounds of a UI Scroll View rectangle.

  • Radius: Set mask radius

Scrolling

  • Horizontal: Allows to scroll horizontally.
  • Vertical: Allows to scroll vertically.

Scroll Type: Specifies a scrolling type:

  • Restricted: Allows to drag Content screen transform strictly within the UI Scroll rectangle
  • Elastic: Allows to scroll content out of bounds, but it will bounce back on touch end.
  • Elasticity: Allows to set a coefficient for elastic movement. The larger value is, the slower screen transform snaps in place

  • Inertia: Allows to add inertia to movement, that helps with scrolling of large content.
    • Dampening: Specifies how fast the inertia movement dampens, a multiplier that applies to residual velocity on each frame.

Scroll Bars

Scroll bars can be used to visualize the relative position of the content rectangle as well as provide additional ways to manipulate content.

  • Horizontal: Enable horizontal scroll bar.
  • Vertical: Enabled vertical scroll bar.
  • Scroll Bar Width: Allows to set how big scroll bars are.
  • Scroll Bar Material: Allows to override default scroll bar material.

Use the 9 Slicing material from the Asset Library or a 9-slicing subgraph node in Material Editor

This custom component is editable, right click to unpack and see it’s contents.

Scripting Api​

UI Scroll View custom component can also be created or configured from script, for example

//@typename ScrollView
//@input SceneObject scrollViewObject
//@input Component.ScreenTransform content

var scrollView = script.scrollViewObject.createComponent(script.ScrollView);
scrollView.content = script.content;

scrollView.dragX = true;
scrollView.dragY = false;

scrollView.scrollType = scrollView.ScrollType.Elastic;
scrollView.scrollBarType = scrollView.ScrollBarType.OnScroll;

scrollView.enableHorizontalScrollBar = true;

scrollView.enableVerticalScrollBar = false;
Was this page helpful?
Yes
No