How to stop infinite scrolling on Scrollbar / Scroll Rect

Hi there,

I am new to the forum and I work on the UI for a project. I basically want to implement a grid view with scrolling vertically - I dynamically load some objects for a shop into a canvas and I want to scroll vertically with a scrollbar.

So far, I created a canvas ‘scrollarea’ with the scroll rect and a ‘canvas_furniture’ as a child where the objects are created in (as children) at runtime. There is also a scrollbar inside the scrollarea. The scrollbar is set to top to bottom.

This is my hierarchy (only the scrollarea and children should be relevant):

This is the scrollarea:

And this is the look of my screen with runtime-objects and the non-working scrollbar (there are more objects below):

My problems are the following:

  1. So far, only mouse wheel scrolling works. The scrollbar somehow is not interactable and the handle disappeared as soon as I dragged the scrollbar asset into the scroll rect vertical scrollbar.

  2. I can scroll infinitely with my mouse, although I have a content size fitter on the scrollarea as well as on the content canvas with the objects - both set to vertically ‘preferred size’. I can also scroll up infinitely.

Can someone help me with figuring out why this is the case? I would like to scroll via clicking and dragging the scroll bar handle, but mouse wheel would be fine for now if only it would not scroll past the last object …

Thanks in advance everybody :slight_smile:

Luckily, I figured out how to solve it: I needed a grid layout group to structure my content canvas_furniture. I can now use the scrollbar and it does not scroll infinitely.

Another problem occured though: There is a big empty space after the last row of objects in the grid which is not very nice.

The grid layout group is configured like this:
9069661--1254730--upload_2023-6-9_21-27-55.png

I would assume this is due to the spacing - maybe even after the last objects there is a spacing that is not cut off?
Does anyone know what to do?

Only things that are part of a “Layout” (Vertical/Horizontal/Grid group) can deliver/generate “Height” to a contentsizefitter. This is why putting them in a Grid Layout allowed it to work. They deliver the height to their parent.

Select an object and look at the preview window at the bottom of the inspector. You can switch it to Layout view and see what the Height value is.

If you know HTML/CSS, then it’s as if all UGUI elements are positioned absolute/float by default, unless they are a Layout element.

1 Like

Thanks Stardog,
if you mean the layout properties panel, I did not find any clues there. The min is equal to preferred height = 670 and I noticed that the gap ingame is higher than in the scene view:


So I really do not know where this comes from.

Dang, this thread looks like it might have helped if only the screenshots from the OP haven’t broken :frowning:

Do you remember how the hierarchy looked by any chance? :smiley: