Scrollable area keeps resetting?

Questions & Answers
1

I’m trying to create a scrollable UI element and every time I do, when I go to scroll, the list scrolls down as I spin my mouse wheel, but as soon as I stop, it rubber bands back to its original position.

I have a canvas and under that I have panel1 with a mask and a scroll rect. Under that is another panel2 which is the content of the scroll rect and has a content size fitter with vertical fit set to preferred and a layout element to set the preferred height. Under that are a bunch of panels that I want to be scrollable.

Also, whenever I hook up my scrollbar to the scroll rect, the scrollbar handle fills the entire scrollbar even though there is content that extends past the scroll rect.

Can anyone explain what’s going on here?

2

WRT your example, just add one more component named “Grid Layout Group” to panel2.
In that component :

  • set Start Axis to Vertical
  • set Constraint to Fixed Column Size
  • set Constraint Count to 1
  • Set value of Cell Size with preferred width and height of child

Further remove “Layout Element” from all of the child of panel2.

3

You can also add the “Content Size Fitter” component to your content and then if it’s a vertical scroll then set the property “Vertical Fit” of “Content Size Fitter” to “Preferred Size” and likewise for the horizontal fit.