- Home /
How can I combine a Mask with a Scroll Rect to limit the visible content?
In the Scroll Rect docs, it said that, "Usually a Scroll Rect is combined with a Mask in order to create a scroll view, where only the scrollable content inside the Scroll Rect is visible." I created a Scroll View GameObject and an Image GameObject with my own sprite as a source image. I made the Scroll View Content the Rect transform from the Image GameObject.
I don't know how to add the mask now. I see Scroll View has a Viewport child GameObject with a Mask component, but the only option available is the checkbox "Show Mask Graphic". Whether it's checked or not, the entire Image is still there when I test Play and scroll. How do I add a mask so that only the part of the image that's visible in the Viewport child GameObject is shown? (using Unity 5.4.1)
Answer by Dennis59 · Nov 22, 2016 at 12:40 AM
@DragonautX, here is an example of how to use a mask and a scrollrect.
That makes sense. I looked into the $$anonymous$$ask docs, saw how $$anonymous$$ask affects child elements. Didn't know about the Grid Layout Group, will look into it more. I'll accept your answer since you included images, thanks.
Answer by DragonautX · Nov 22, 2016 at 12:34 AM
I found in the same docs that I had to put the Image GameObject as a child of the Content child GameObject of Viewport. It said, "All the scrolling content must be children of a single content GameObject that is a child to the viewport. The content Rect Transform needs to be referenced in the Content property of the Scroll Rect."
I found I could make an Image component in the Content GameObject itself, but it doesn't display right. Setting the Image GameObject's coordinates to 0 (and sometimes fiddling around with the anchor) fixed some display oddities. Setting the Content GameObject's Left and Right Transform properties to 0 helped too.
Your answer
![](https://koobas.hobune.stream/wayback/20220612101129im_/https://answers.unity.com/themes/thub/images/avi.jpg)