Varion Drakonov
Varion Drakonov

Reputation: 51

Scrolling does not work in Unity, it does not react at all

Such a problem, scrolling from the word does not work at all. That is, he does not scroll through the list, tried various tutorials from YouTube, read the documentation and even watched the official lessons and something does not scroll out. If you need screenshots or something like that, I can provide them to any image exchange.

enter image description here

enter image description here2

enter image description here3

Upvotes: 0

Views: 7638

Answers (1)

TEEBQNE
TEEBQNE

Reputation: 6295

I am not sure of your exact setup but will provide a generic setup for a Vertical scroll. If you need help implementing it to your specific UI, I can tweak or add additional information to the answer.

Firstly, here is a setup of my hierarchy: Example Hierarchy

To understand why I have everything setup, I'll break down each object and the components attached, the anchoring, coloring, etc.

Panel_Mask

The outermost part of your scroll should be a Mask. You can either use a Mask component if the geometry of your sprite is non-rectangular, or you can use Rect Mask2D, which is much more performant but only will work properly if your UI is a rectangle. You will also notice my mask component's color is almost completely clear. You do not need to do this, but the color is set up so the alpha is (1/255). If you have a Mask on an object and the alpha is 0, all childed objects will not appear. I set the background color of my scroll on the ScrollRect object instead.

Panel_Scroll

The next layer will be your ScrollRect. As the Mask is the entire visible portion of your UI, the ScrollRect defines the space where the user can scroll in the UI. As this is the case, I set the anchors to stretch-to-fit to maximize the space the scroll will work. Along with this, there are three other important steps when setting up a ScrollRect. Firstly, check which direction you would like the scroll to be, either horizontal or vertical. Next, you will need to assign the Viewport of your UI. The Viewport is just the space where the scroll is visible to the user. As there is a Mask component, the visible part is anything within this Mask, so assign the Panel_Mask as the viewport. Finally, you will need to assign the Content of the scroll, which is the actual data that the scroll will contain and allow the user to move between. The object childed to the Panel_Scroll, Panel_Content is what should be assigned here.

Panel_Content

The final portion to setting up the scroll will be our content. The content is the object that holds all the data that the user can scroll over. As the number of objects can be variable, you will want to assign a HorizontalLayoutGroup, VerticalLayoutGroup or GridLayoutGroup, depending on your needs. For your case, the VerticalLayoutGroup will do the trick as your scroll has vertical movement. You can mess with the specific settings of the layout group, but for the setup I have, I made the scroll content objects fit the width of their container and define their own height. I also added a bit of spacing to differentiate between objects in the scroll. As I generally like to have the content start at the top of my UI container, I also set the anchor points of the content to be stretch-to-top-aligned, meaning it will fill the width of its parent and will always be on the top of the parent container. The final component is a ContentSizeFitter, which forces the object to resize to the size of its children objects. As the list of objects in your list grows, the ContentSizeFitter will grow with it, similarly, if it shrinks, so will the Panel_Content.

Image_Data

Nothing too special with my setup as they are just image components with childed text. Depending on how you want your UI to look, you can tweak whatever you need on this object.

Here is a gif of the finished product working as a scroll: Example 2

Later in the gif I showed the scene view to display how the Mask component is working as I scroll up and down the list. Let me know if you have any questions.

Upvotes: 5

Related Questions