Scroll Bar

By Yuanbo Li, 2023 Spring

Scroll bars become very important when there is a requirement to present an large amount of information within a confined window. An example of this can be observed in gaming scenarios where players need to access their inventory and explore the contents therein. By incorporating scroll bars, users can conveniently navigate through the contents of their package, enabling them to view and interact with the items effectively.

Scroll bars play a crucial role in enhancing the reading experience of lengthy texts in VR. While the complete text content is desired, it is equally important to ensure that the font size is sufficiently large for effortless reading. Considering the restricted display area, the inclusion of a scroll bar becomes essential to facilitate seamless navigation through the text.

Example Result:

The user can use the scroll bar to view the full text.

Step 1: Creating an Scroll Rect Object

The first step is to create an empty object and then attach "Scroll Rect" script to it.

Step 2: Add a Mask

Now we have a scroll rect object. Add a mask object for it. You will be asked to adjust the mask size, which decides how large the window is.

The image below shows how to add a mask (bottom right), and adjusting the mask size (middle)

Step 3: Add object to scroll

In the hierarchy on the left bar, add whatever you want to scroll under the scroll rect object.

Step 4: Create a Scroll Bar

Create another empty object inside the scroll rect object. Attach Scroll Bar script to it. 

You may also need to select the direction you want to scroll

Step 5: Create a Scroll Bar

Attach the scroll bar back to the scroll rect.