1
\$\begingroup\$

I have this problem. I'm using a scroll rect to display a series of buttons, but I would make sure that as soon as the buttons (with the scroll rect), come out of a certain area (bounded by a panel), become invisible. to explain it better in the pictures. I would like the visible part of the list of buttons to stop where there is the black arrow, and then I would delete the part where I drew the red waves

enter image description here

enter image description here

\$\endgroup\$

2 Answers 2

4
\$\begingroup\$

The component you're missing is the Mask. If you look at the official documentation for how to use a scroll rect. It'll show you that you need to put an Image component (even a mostly transparent one) on the parent container, and the Mask component. This will apply a mask to the children that go outside of the parent image. This results in all the stuff that's been scrolled outside of the parent to be hidden.

\$\endgroup\$
0
0
\$\begingroup\$

Use a RectMask to solve this problem. If you would like to have the scroll area a certain shape (like with rounded corners) then make sure the background image is part of the container object and use a regular Mask instead.

\$\endgroup\$

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .