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
\$\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
\$\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\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.