I have a how to play panel that the user can scroll through. The panel includes images and text. I have my scroll rect settings on unrestricted. I have tried the other setting including clamped and elastic. Elastic does not let me scroll very far (as seen in the video below) and clamped restricts any movement at all. With the unrestricted setting the user is able to scroll forever which does not look good in a final product. How can I make a scrolling constraint at the top and bottom of the panel?
I posted this video for another issue I was having (which is solved), but you can see my setup - - YouTube
If the elastic mode acts like unrestricted and clamp doesn’t allow you to scroll.
It’s probably because you have setup the viewpor of the scrollRect to the wrong GameObject.
Since it took me hours to find out and I kept finding this post I post here the answer of my problem.
The Viewport comes standard with Scroll View.
The view port is basically like the window you look through at the landscape (or huge picture or whatever you are scrolling over.
The content (Panel in my case ) is the landscape ( the big thing you are scrolling).
Panel (UI-> panel element , this is what I use to hold my scrollable content ie. my player buttons
So firstly to get things right . In the Scroll Rect component make sure you have your content field set to your actual content (landscape , big thing etc) .
Make sure that your View Port field is set to the ViewPort ((Your window , thing you are looking through).
If you now set your Scroll Rect → Movement Type to clamped, the scroll should not move beyond your content.
In my case my panel (the content ) actually gets populated with buttons at run time , so I added a content fitter component to resize it dynamically.
Sorry about all the house analogy, but this was the easiest way for me to explain.
Hope this helps someone.
How it works and how it should work may not always be the same :
After having used unity for over 2 Years and Scroll rects etc all implemented quite often with very different demands i still run into troubles like these !!
This time : The solution was to add a horizontal layout group (for horizontal scrolling) on the content.
The problem seems to be that the scroll rect does not get the correct values from the content size fitter without the layout group ???
I do not remember what the tutorial has to say about this, but it does seem all weird. Somehow the logic of it all still eludes me, which means the components often do not behave like one would assume from the tutorials or the manual.
For me personally, the key was to understand that the content has to be larger than the root (viewport) Then, the desired effect could be achieved:) Hope this helps someone!
2.Add Vertical/Horizontal layout group depending on what you need To Viewport
3.Enable Vertical/Horizontal layout group - Control Child Size : Width and or Height, So the content size
will always change depending on what you have, will also make it unrestricted when inside the Contents Area and elastic outside of it
Oh come on. You should go through official manual/learn section/documentation BEFORE asking here. Believe me, you’re gonna learn many valuable things there! https://unity3d.com/learn/tutorials/modules/beginner/ui/ui-scroll-rect
it’s covered at 2:30, but i highly reccomend you watching the whole video, and thengo through all the /learn/tutorials section.
Make a New Game Object outside the content Panel and resize it’s rect transform that to of the screen now drag this game object’s rect transform to your scroll rect’s view port and set the mode to clamped this worked for me.
I ran into this same problem recently and found a whole new thing that can screw with this. In your Layout Group, make sure that you don’t have any padding at the top or bottom. I had somehow added a ton of padding to the top, which was allowing it to scroll past the top of the content.
This is one of the top search results when googling how Unity’s Scroll View works, so here’s some additional information (tested with Unity 6.1):
Movement type “Elastic”: You can drag the content of the Scroll View “outside” the window, so it’s cut off and instead you see more of the background. When you stop dragging, then everything springs back into place.
“Unrestricted”: Same thing but it doesn’t spring back.
“Clamped”: You can’t move the content, unless there’s more to see (same behavior as on every website).
I want to fill my Scroll View with a list of buttons, so I added a Vertical Layout Group and set it to control the children’s width and force expand their width → The buttons take up the full width (minus padding) but use the height I set for them.
To make the Scroll View actually scrollable, I also added a Content Size Fitter and set “Vertical Fit” to “Min Size”. This tells the Scroll View’s Content to take up the minimum space required to fit all of my buttons (and only that, no more, no less - this works with padding too).
E.g. I instantiate 10 buttons from the same prefab that uses a height of 50 = 500 pixels in total. If the Scroll View is set to 350 height, then the vertical scroll bar appears (default setting of “Auto Hide And Expand Viewport”) and I can scroll to the last button.
If I had not added the Content Size Fitter, then the Content would have always been the same size. E.g. 200 → no scroll bar & can’t scroll, 400 → scroll bar visible but you can’t reach the last button, 400 with only two buttons → lots of empty space at the bottom.
The horizontal scroll bar stays hidden (“Auto Hide”) because there’s no extra content to display on the left or right.
