Scroll View in Unity - 2021 Tutorial

If you've ever needed a scrollable container of items in your Unity game menus, keep watching! Confine any number of items to the limits of a container and mask the overflow.
Learn about the different settings of the scroll view/rect as well as how to use the 'Content Size Fitter' to dynamically resize your content.
❤️ Become a Tarobro on Patreon: / tarodev
=========
🔔 SUBSCRIBE: bit.ly/3eqG1Z6
🗨️ DISCORD: / discord
✅ MORE TUTORIALS: / tarodev
About Tarodev:
Develop video games like a pro!
Whether you're a beginner or a seasoned game developer, you'll find lots of useful tips and tricks to boost your development career. Visit the channel: / @tarodev

[@barsz3]

Great! No intros, no begging for likes, just straight to the point. Exactly what I was looking for. Thank you.

[@KingJames586]

I've watched a half dozen videos and your is, by far, the best explained (and up-to-date, compared to Brackey's!) Thank you!

[@jpalz1]

I had been struggling with this for quite a bit, and your tutorial helped me immensely. Thanks a bunch! :D

[@alperencan4939]

For the ones who are new in Unity, if you want to group these 9 objects under "component", select all objects then press ctrl+shift+G

[@JianqiuChen]

super cool stuff to learn on the weekend lol, will watch the entire playlist.

[@michelmilek2891]

Great tutorial, directly to the point. Thank you very much!

[@armin1888]

Thanks! This tutorial was great, got me right back into the components I forgot how to use. One thing to add the Content size fitter shouldn't be on the same object as the layout group according to Unity. I fixed it by adding it to the parent (Object with Scroll Rect component)

[@user-qh5fv7wc8l]

I just started to watch your tutorials. It's pretty helpful. Thanks. 괜찮은 튜토리얼 같아요~~ 땡큐~ ㅎㅎㅎㅎㅎ

[@kameliajamaati9662]

Very concise, clear and helpful. Thank you so much

[@Xarma007]

This some top notch tutorial, nice and short, thank you!

[@Community-Compute]

Thanks, super helpful! Came here to brush up on this component before implementing a new quest journal UI. I'm ready now.

[@_sIash]

I always end up finding the solution to almost anything on this channel, bravo taro 👍

[@affenkratzer]

this makes my shop look much better thank you

[@EdadImperial]

Ty for the tutorial, you explain my problem with the content size and give a direct answer (ContentSizeFitter) and why, ty

[@jasondotjson34]

Thank you for the tutorial I just needed that!! :)

[@Hideyuki_Atago]

I wanted to make a questing system, and since I'm having a lot of quests eventually I would need a vertical one, thought I would have to code it out then I noticed scrollview and that brought me here haha, very easy to follow

[@svyat1003]

Maaan, u saved my graduate work. I make an educational game and could not figure out how to create a table to display data from a database. ChatGPT gave me half working code without explaining how does it work. But your video showed me step by step how to do it on simple example.

[@djpierreb]

You saved my life for the second time ! Great job

[@ScarletSnake]

Instant sub, this is great! Thank you! 👏👏👏

[@alvarofrederico3719]

you just had the right answer all the time, thank you S2

[@blackwhalestudio]

Excellent tutorial, thanks a lot!

[@AlexGorskov]

Great tutorial, thank you, Tarodev!

[@Tarodev]

:D

[@bissash103]

This was a really helpful tutorial!

[@bunggo9914]

disable show mask graphics in the mask component, it will hide the mask image so you will never need to reduce the alpha to 1.

[@Tarodev]

Oh wow... Thank you

[@graig2558]

Perfect video as always. One thing I would love to see is how to scroll using gamepad/keyboard etc?

[@aussie_bay_flpz4166]

Great tutorial ! You have a new sub

[@ioannapanali7576]

Thank you for this tutorial!

[@alperdogru1745]

You are great. Thank you for tutorial !

[@phineasfacingforward3460]

The best tutorial on ScrollRects ive seen

[@Tarodev]

This was my VERY first tutorial 😊

[@galigapiya]

Perrrrfect tutorial. Thanks!

[@pixitales5017]

Nice tutorial! You missed one thing. You know how your scroll view always show at the center of the viewport? You can change that by moving the pivot point all the way on left. Then your view port starts on the left side.

[@proximacentauri9509]

Mate i tried your method but it doesn't work to show the images in the center of the view port, do you have a tutorial for that please ?

[@klajdimyftari4691]

@@proximacentauri9509 if you are using windows keep the alt key while you select left side on RectTransform panel. If you are using a Mac keep the Cmd key pressed instead

[@proximacentauri9509]

@@klajdimyftari4691 Thank's mate!

[@therandom446]

Holy shit you are a god thank you

[@callergaming2575]

Thanks alot

[@ExoticElephantStudios]

Thanks Tarodev, very cool

[@luanleme5684]

Thanks for the help!

[@mani_mincraft]

thanks for the great tutorial!

[@Aryazaky]

If you can't scroll anything even tho you have an event system, make sure that your contents doesn't have an EventTrigger component. Because for some unknown reason it will catch the pointer events and prevent the parent which has ScrollRect (Who needs pointer events) from catching the events. As a workaround, implement the IPointer interfaces directly instead of through an EventTrigger

[@hdggfhjb6768]

Great. This is best tutorial for scroll in untiy.

[@user-kb3tp9gx2g]

Thank you so much. You sooooo good!!!

[@luiginicastro1101]

Would you be able to create a carousel effect for the UI so it's constantly looping when you scroll?

[@tomas.menniti]

thanks a lot for sharing, you are amazing!

[@w_ldan]

Absolutely come in clutch thanx😂

[@pransukatiyar9536]

Thanks for this tutorial

[@IlanPerez]

Thanks very helpful

[@cwdgamedev1017]

Thank you!

[@deivid-01]

Thanks a lot !

[@arjunmehta2853]

Hey! In the part where you were talking about masking, when you add the Mask component, there is an option to untick "Show Mask Graphic" in order to remove the white part, which is the better method to use. Hope this helps!

[@dridrimoon6275]

thanks a lot !

[@BenjaminWidawski-vi1hl]

Thanks!

[@kim1234kim]

hi, great video!! How would you get the list to start over at the end? After the sword, the smiley face is there again without having to scroll in the opposite way

[@mariusst09]

Thenks bro ❤

[@nwotyzarc]

I always come back here when I set up a scroll rect :D

[@Tarodev]

Sometimes the brain just cannot retain certain information 😂

[@duyha2454]

thank you

[@unitynocode]

Thank you so much ! No code is always cool 😊

[@klausbdl]

if you cant move your list, dont forget to add the Event System... I forgot about that and I was banging my head for ages trying to figure out the problem

[@funlightfactory6031]

OMG!! Thank YOU!!! I was having the exact problem!!

[@makingtechfriendly]

Thanks

[@Vulcagon]

at 2:27 the easyest way to make the viewport transparent is to just untick "Show Mask Graphic" in the "Mask" window

[@arunross]

Thank You...

[@charithnirmal5823]

Brilliant

[@user-hl7ti6yy3x]

ty

[@eliorubenmc]

every time I see this channel I say in my head: "En Taro Adun" and think the icon isn't right ha ha ha, but not everybody is an StarCraft fan... anyway, Good video, thanks!

[@rafaelbrustolin4687]

thanks love u

[@user-od9gx8xd2j]

thank you good

[@kyleme9697]

Be my first subscriber ... Are you saying at the end this was your first video? Its just over 14 months later and you've got over 28K subscribers now. Good job !! I personally love the short n sweet videos so I'm going thru all of yours now. Thanks !!

[@Tarodev]

Yessss, I had zero subs at this stage and was excitedly waiting for my first 😊 Thanks for enjoying my content!

[@Mushe94]

Show mask graphic on the Mask component avoids having to change the alpha

[@MyRapper34]

Thank you!

[@AkashKumar-gu7jc]

Hey, Take This!⭐ Great Tutorial!

[@Tarodev]

Ohhh, a gold star 😊

[@AkashKumar-gu7jc]

​@@Tarodev Yes... I made it the same quality as your videos 😃 I have one request, if you will, Do you know how to build a Popup which closes on outside click. I'm struggling with it! I tried using OnDeselect, OnPointerEnter, OnPointerExit. And inside OnEnable() { EventSystem.current.SetSelectedGameObject(gameObject); } But, that solution doesn't work for nested Panels. (eg Button on Panel --> (opens another) ---> Button on Panel Can you please recommend a solution/resources for that? Also, my understanding of IPointerClickHandler IPointerDownHandler IPointerEnterHandler IPointerExitHandler IPointerUpHandler is very meagre. If possible please recommend some resources. Looking for your kind help...

[@shanjohnkj6851]

Life Saver

[@user-zb4ri7wk7g]

Can i figure out somehow is object in scroll viewport (visible) or not? I found a Unity component "ScrollView" that has a "visible" property but I can't figure out how to access "ScrollView", only I can find is a "ScrollRect"

[@NairatAhmad]

Is there a way to scroll a step-by-step? like .. I created something by putting arrows to the left and right, and scrolling my panel by Image width on click, this way it jumps one picture/image on a time. Is there an easy/simple way to do it with the default scrollbar the way you've shown us? Great video BTW :)

[@apemant]

Perfect, thank you! Typical Unity thing that's unintuitive. Anyway, I put the Mask on a direct parent of the "Scroll" object which also worked out fine, so there was no need for the "View" object for my purposes.

[@Hamentsios10]

amazign tut

[@karbashevsky]

I came looking for copper and I found gold. Thank you so much!!! Also is that possible to use mouse scroll for scrolling but not mouse drag?

[@TrentTheTraveler]

Does anyone know how to clamp scroll to each object within the "scroll view"? So in your case, It would stop at each character and in order to go to the next character, you would have to scroll again. Sort of like swiping through images on your phone?

[@turquoise7817]

i would recommend using the "simple scroll snap" asset (free). i'm currently trying to use it and i am running into issues (mostly to do with my own usage) but it overall seems really helpful

[@heavensfield494]

If the content size fitter just makes the content holder width turn to 0, Is it because you have use an empty gameobject as the content, just fix them by making the size of the empty gameobject bigger

[@radamantiun1994]

How can i achive this result, without UI items

[@iprg8406]

when i do this all of the objects snap back to position after i move them

[@molcho9286]

I have a problem, my scroll rect onty scrolls if I touch outside my buttons, and if I try to scroll putting my finger on a button it selects it, how can I fix it?

[@nmhero4824]

This wont work for me for some reason, I have followed multiple tutorials and even used the built in object but nothing will scroll

[@abdullahshafqat772]

Hey great tutorial as usual. Could you help out with one thing though I followed along your 3D objects in UI tutorial and then wished to create a scrollable view with those but doing this does not seem to mask the 3D objects

[@Tarodev]

Indeed, it won't work with 3d as scroll view is a canvas specific utility. You'd need to either use a camera with bounds limited to the scroll area, or a Shader which cuts it off

[@mendoncagamer6021]

Hello, I'm from Brazil and I'm using Google translate to communicate, can you clear up my doubts? I would like to do it using the horizontal scroll bar, but I don't know how to make it active, because every time I play the scene the horizontal bar turns off, I've tried several options but it keeps turning off by itself when I play, do you know what it could be?

[@MagnusRazer]

Bastante util

[@AnandMishere]

Particles are not visible inside the scroll view, even the visible inside mask is enabled in renderer

[@reydion1648]

Excellent tutorial! I only have one issue. When I add the "Content Size Fitter" component onto Contents, I lose the ability to scroll. It's like the size Content becomes 0 and I can't scroll past the centre of the the screen.

[@IcieJuicy]

I ran into this same issue and noticed that he had a horizontal layout component added to the content container. I added it and that resolved my issue. Hope it helps :)

[@Duros360]

@@IcieJuicy Im having this same issue, Which object has the "horizontal layout component"? The Panel, the View or the Contents?

[@murielbullot5632]

@@Duros360 the Content

[@alenogales4073]

@@IcieJuicy thank you so much for this comment, you just saved me, lol

[@adhocdropoffs]

I know it's been almost a year but if you're still around: When I follow these steps, I can't see the items on the far left unless I pull them into view with elasticity and then they bounce back out of view. So my steps are to make a new scroll view with the default scrollbars etc. Increase the height of the scroll view > Make the content a vertical layout group > Make 7 child objects with layout element components (I also added a child image to each of these so I can see them) > Set their Rect transform height to 100 > Play. Items at the top of the list dont stay visible.

[@adhocdropoffs]

Figured this out but for anyone hitting the same issue: I had to make sure that my Content's height was much bigger, and went outside the viewport and then the vertical layout group on my Content had padding on the top and bottom (200, -200) that kept things in the right place

[@Tarodev]

@@adhocdropoffs You could also check out "content size fitter" to dynamically resize it to fit the content.

[@StrawberryDeveloper]

Lets say i only have one item, how can i make it stick to the left or right, instead of the center(Building a dynamic inventory system)

[@Tarodev]

You could create a wrapper object around your item. The wrapper can be full width and the item can be left aligned within

[@user-kk7hw6qr2c]

I'm lost right at the start as the item "Content" I have no idea what that is...a empty gameobject? a panel? You refer to it as a container, but I don't know what that is.

[@nocelebrity6042]

The "mask" effect of this does not happen for me when I follow this to the letter. When Unity's default ScrollView is added using the GameObject menu, that maps most of the arrangement discussed in the tutorial, and yet, when settings are adjusted to match what this tutorial says to the letter, the "mask" effect still does not happen. Another thing that never happens no matter how much content is added is the scroll **stopping where the user lets go of it** after the user releases the mouse button. Instead, the scroll view's content bounces right back to wherever it started.

[@Tarodev]

Look into the content size fitter. What's happening is the content is bigger than the actual content rect, so it flings back to where it actually fits into the scroll, even if the content is overflowing

[@_mirai]

goood

[@kotraner]

Hello ! :) I joined your Patreon :) and I become Tarobro! but it doesn't have image that this tutorial show~ , any way that I can get it to follow your tutorial?

[@Tarodev]

This video was looooong before my patreon, but message me on patreon and we can work something out!

[@kotraner]

@@Tarodev Ok I just sent you message on Patreon :)

[@Hakkology]

Scrollview actually took my 2 days and i still haven't figured out the solution. Elastic component automatically returns to original position after dragging. Such a nasty component...

[@TylerLarson]

Very first subscriber..... Hmm.

[@paellarusa]

Im surprised by how nobody asked about how you copy+pasted the images and they stuck one after other? 4:49 Doesn't work for me. Okay I found it. By Layout Group. Thanks

[@yahsaikol6279]

hmmm, it's not working g:(

[@Liqvidniy]

Thank you!

[@dfilitto]

Thanks!!!!!