How to solve event triggers blocking scrollview inputs in an inventory/menu?

I’m working on an inventory system. I’m done with most of the basic stuff but there are a few critical points that I’m unable to fix.

This is how my inventory looks like at the moment.

This is the object hiearchy in the canvas.

These are the attached scripts and components.

As you noticed if you have checked the hierarchy, the panel is inside a scroll view.

  • Problem 1

I’m populating the inventory slots dynamically inside a grid layout using one example slot object. If the player has 30 slots, a script creates 29 copies of it and adds them as siblings. Grid layout handles the positioning. If there are 100 slots some of them won’t be able to fit into the screen and the user will have to scroll vertically to reach them. All my inputs are blocked by the items in front of the scrollview, therefore I can’t scroll the panel. I was using buttons earlier and everything was fine but I had to use an event trigger instead to differentiate between pointer up and down events to handle dragging.

  • Problem 2

It’s a similar issue with the first problem. Maybe I can even solve it on my own if the first one is solved but here it is. There are 4 tabs at the top. I want to be able to switch between 4 inventory tabs using these buttons and also swiping horizontally. Unlike the vertical scroll in a single tab, horizontal swipe should move to the next tab completely and not show half of a tab and half of the other.

For example, if the user is in equipment tab a vertical scroll down should move the inventory slots up as long as the scroll’s length. However, a swipe to right in equipment tab, as long as it’s half a screen long, should move the whole materials tab into the screen and move the old, equipment panel out.

Any kind of help/guidance is appreciated. Thanks!

I finally made an answer for this. Obviously years late, but Hopefully anyone else who stumbles upon this will find it helpful. Add this component to any GameObject with the EventTrigger:

  • using UnityEngine;
  • using UnityEngine.EventSystems;

public class PropogateDrag : MonoBehaviour{

	public UnityEngine.UI.ScrollRect scrollView;
    // Start is called before the first frame update
    void Start()
    {
		EventTrigger trigger = GetComponent<EventTrigger>();
		EventTrigger.Entry entryBegin = new EventTrigger.Entry(), entryDrag = new EventTrigger.Entry(), entryEnd = new EventTrigger.Entry(), entrypotential = new EventTrigger.Entry()
			, entryScroll = new EventTrigger.Entry();

		entryBegin.eventID = EventTriggerType.BeginDrag;
		entryBegin.callback.AddListener((data) => { scrollView.OnBeginDrag((PointerEventData)data); });
		trigger.triggers.Add(entryBegin);

		entryDrag.eventID = EventTriggerType.Drag;
		entryDrag.callback.AddListener((data) => { scrollView.OnDrag((PointerEventData)data); });
		trigger.triggers.Add(entryDrag);

		entryEnd.eventID = EventTriggerType.EndDrag;
		entryEnd.callback.AddListener((data) => { scrollView.OnEndDrag((PointerEventData)data); });
		trigger.triggers.Add(entryEnd);

		entrypotential.eventID = EventTriggerType.InitializePotentialDrag;
		entrypotential.callback.AddListener((data) => { scrollView.OnInitializePotentialDrag((PointerEventData)data); });
		trigger.triggers.Add(entrypotential);

		entryScroll.eventID = EventTriggerType.Scroll;
		entryScroll.callback.AddListener((data) => { scrollView.OnScroll((PointerEventData)data); });
		trigger.triggers.Add(entryScroll);
	}
}

And then assign the scrollview you want to scroll in the editor.
In the future, either try to use buttons, or make your own script that uses the Unity handler Interfaces (e.g. IPointerClickHandler)

Hi!
Hey! Perhaps you can find a solution to your problem here. Otherwise, you can find a lot of useful information here