Using a Scroll View in Unity UI
Below I have a UI for a mobile app. This image from the scene view shows a UI with 4 buttons:
Below, in the game view, when the app is running, only the top 2 are visible, due to the screen size:
The lower 2 are off the screen. Let’s use this as an example of how to use a scroll view. A good trick is to add the scroll view while in play mode. This makes it easier to make adjustments. After it is set up properly in play mode, save the UI Canvas as a prefab, stop play mode, delete the canvas from the scene, and then drag the prefab canvas made during play mode back into the scene, which will restore everything that was done in play mode. I will demonstrate this here.
First, I will enter play mode and add a scroll view to the canvas:
Now that we have the scroll view, set the content of the scroll rect to the panel, in this case it will be Main_Menu_Panel. Also don’t forget to disable or remove the image component from the scroll view:
Next adjust the anchor and the positioning of the scroll view so that it fits the screen. When it fits the entire area, you will notice the scroll bars disappear. This is because there is nothing to scroll as the scroll view fits the entire screen and is not masking anything:
As I’m only going to use a vertical scroll bar here, I will delete the horizontal scroll bar.
Now, I will adjust the scroll view rect with the image scaler tool, to the desired scrollable area:
I also adjusted the with of the vertical scroll bar (not shown on video), which comes back now that the scroll rect no longer takes up the entire canvas. With that done, we can now scroll the screen up so that all buttons will scroll up into view:
Now that the scroll view is pretty much working, we need to do some cleanup as we are still in play mode. If you end play mode now, all your work will be lost. In order to get around this we will create a prefab of the whole UI canvas:
Now we can safely exit play mode. After we do that, our UI canvas will revert back to what it was before we added the scroll view. Simply delete the UI canvas in the scene and drag the prefab that was created back into the scene and we will have everything back.
And that’s a basic scroll view set up in Unity.
