Using a Mask to block clicking

I have created a Scroll View component , and in the Viewport, my Content contains several rows with BoxCollider2D on them. The user can scroll through all the rows, and click on their selection, it works great.

The problem is that even when they click outside the visible area (ie. below the visible ScrollRect), they can select a row. It’s as if the Mask is not present or turned off. How can I make it so that the masked rows (invisible rows) aren’t triggering the click event?

I figured this out, thought I’d add my solution here. It appears that the BoxCollider2D isn’t playing well with my UI components. I changed my code to instead use a UI.Button that I stretch over the row, then I set the button Image component to alpha 0 so it’s invisible. Doing it this way, with all UI components, makes them all play well together, and the mask works properly.

If you don’t mind using Update() to keep checking, you can sort of do this.

in each of your item, add a script.

then declare a public RectTransform

drag the scrollview panel(for me I use panel) to the RectTransform component and link it to the script.

then in update,

if(!RectTransformUtility.RectangleContainsScreenPoint(rt2, this.gameObject.transform.position, null))
this.gameObject.GetComponent().enabled = false;
this.gameObject.GetComponent().enabled = true;