Can't figure out how to scroll inside scrollRect with buttons inside

I have a scrollRect with a vertical layout of buttons that are full-width (a list of items). The UX I'm looking for is for a person to be able to scroll (or finger scroll) and then tap the one they want (no scroll bar).

The issue I'm having is the button is taking over the event, and not even trying to sense a scroll, even though it hasn't processed a 'click' (which is what I'm listening for). How do I enable scroll events to pass through the buttons if a click isn't registered? Thanks!

 

Does your button inherit from EventTriggerListener and override the OnDrag interface? The UGUI's button only takes over the OnClick Event and will not affect ScrollRect.

 

I have buttons that look for the click event in a switch block.

It's all done via script.

All I know is whenever the cursor or finger is over a button, it won't scroll. Between the buttons and it'll scroll until it hits a button and stops.

 

Make sure your button or it's base not use IDragHandler

 

It's only a click defined. I'm not sure how to check that.

 

would you mind putting up the button's code?

 

As soon as i get back absolutely

 

Here is the logic for the events:

Code (CSharp):

1. // Button Switch statement to determine which button has been clicked, as fire associated event
2.         switch (key)
3.         {
4.             case "Start Button":
5.             switch (type)
6.             {
7.                 // case UiEvents.MouseUp:
8.                 case UiEvents.Click:
9.                     {
10.                         StartButton();
11.                     }
12.                 break;
13.             }
14.  
15.             break;
16.  
17.             case "Reset Button":
18.             switch (type)
19.             {
20.                 // case UiEvents.MouseUp:
21.                 case UiEvents.Click:
22.                     ResetTimer();
23.                 break;
24.             }
25.             break;
26.  
27.             case "SettingsBtn":
28.             switch(type)
29.             {
30.                 // case UiEvents.MouseUp:
31.                 case UiEvents.Click:
32.                     view.settingsPanel.TogglePanel();
33.                 break;
34.             }
35.             break;
36.  
37.             case "SetGraph":
38.             switch(type)
39.             {
40.                 // case UiEvents.MouseUp:
41.                 case UiEvents.Click:
42.                     // Get values
43.                     view.graph.DataSource.VerticalViewOrigin = double.Parse(view.graphOffset.text);
44.                     view.graph.DataSource.VerticalViewSize = double.Parse(view.graphSize.text);
45.                 break;
46.             }
47.             break;
48.  
49.             case "SwitchGraph":
50.             switch(type)
51.             {
52.                 case UiEvents.Click:
53.                 if (rightFooted)
54.                 {
55.                     rightFooted = false;
56.                     RenderGraph(currentUserForceArrayL, currentUserForceArrayR);
57.                     TextMeshProUGUI graphText = utils.getAttachedObject(data).GetComponent<TextMeshProUGUI>();
58.                     if (graphText != null)
59.                     {
60.                         graphText.text = "Right Graph";
61.                     } else
62.                     {
63.                         Debug.Log("TextMesh Empty");
64.                     }
65.                 }
66.                 else
67.                 {
68.                     rightFooted = true;
69.                     RenderGraph(currentUserForceArrayL, currentUserForceArrayR);
70.                     TextMeshProUGUI graphText = utils.getAttachedObject(data).GetComponent<TextMeshProUGUI>();
71.                     if (graphText != null)
72.                     {
73.                         graphText.text = "Left Graph";
74.                     } else
75.                     {
76.                         Debug.Log("TextMesh Empty");
77.                     }
78.                 }
79.                 break;
80.             }
81.             break;
82.  
83.             case "RacesListBtn":
84.             switch(type)
85.             {
86.                 // case UiEvents.MouseUp:
87.                 case UiEvents.Click:
88.                     view.racesPanel.currentUser = currentUserSave;
89.                     view.racesPanel.TogglePanel();
90.                 break;
91.             }
92.             break;
93.  
94.             /* User Session Buttons */
95.             case "AddUser":
96.             switch(type)
97.             {
98.                 // case UiEvents.MouseUp:
99.                 case UiEvents.Click:
100.                 {
101.                     AddUser();
102.                 }
103.                 break;
104.             }
105.             break;
106.  
107.             case "AddUserSubmit":
108.             switch(type)
109.             {
110.                 // case UiEvents.MouseUp:
111.                 case UiEvents.Click:
112.                 {
113.                     GameObject selObj = utils.getAttachedObject(data);
114.                     InputField contextInputField = selObj.GetComponentInChildren<InputField>();
115.                     string contextInput = contextInputField.text;
116.                     Debug.Log("Add user of name " + contextInput);
117.                     AddUserSubmit(contextInput);
118.                     contextInputField.text = "";
119.                     contextInputField.Select();
120.                 }
121.                 break;
122.             }
123.             break;
124.  
125.             case "AlertButton":
126.             switch(type)
127.             {
128.                 // case UiEvents.MouseUp:
129.                 case UiEvents.Click:
130.                     view.alertPanel.GetComponent<AlertWindow>().ToggleAlertWindow();
131.                 break;
132.             }
133.             break;
134.  
135.             case "LoadUserDataButton":
136.             switch(type)
137.             {
138.                 // case UiEvents.MouseUp:
139.                 case UiEvents.Click:
140.                 break;
141.             }
142.             break;
143.             case "UserListButton":
144.             switch(type)
145.             {
146.                 // case UiEvents.MouseUp:
147.                 case UiEvents.Click:
148.                     view.userWindow.toggleUserPanel();
149.                 break;
150.             }
151.             break;
152.             case "RemoveUser":
153.             switch(type)
154.             {
155.                 // case UiEvents.MouseUp:
156.                 case UiEvents.Click:
157.                     PointerEventData eventData = utils.getValueForKey<PointerEventData>(data, "PointerEventData");
158.                     GameObject selObj = eventData.selectedObject;
159.                     GameObject attachedObj = utils.getAttachedObject(data);
160.                     string email = attachedObj.GetComponentInChildren<TextMeshProUGUI>().text;
161.                    
162.                     if (view.saveFile != null && view.saveFile.GetName() == email)
163.                     {
164.                         view.saveFile.Close();
165.                     }
166.                     RemoveUser(email);
167.                 break;
168.             }
169.             break;
170.  
171.             case "RemoveRace":
172.             switch(type)
173.             {
174.                 // case UiEvents.MouseUp:
175.                 case UiEvents.Click:
176.                 PointerEventData eventData = utils.getValueForKey<PointerEventData>(data, "PointerEventData");
177.                 GameObject selObj = eventData.selectedObject;
178.                 GameObject attachedObj = utils.getAttachedObject(data);
179.                 string raceName = attachedObj.GetComponentInChildren<TextMeshProUGUI>().text;
180.                 Debug.Log("Trying to erase " + raceName);
181.                 view.saveFile.Delete(raceName);
182.                 view.racesPanel.GetRaces(view.saveFile.GetName());
183.                 break;
184.             }
185.             break;
186.  
187.             case "UserPanelMain":
188.             switch(type)
189.             {
190.                 // case UiEvents.MouseUp:
191.                 case UiEvents.Click:
192.                     PointerEventData eventData = utils.getValueForKey<PointerEventData>(data, "PointerEventData");
193.                     GameObject selObj = eventData.selectedObject;
194.                     GameObject attachedObj = utils.getAttachedObject(data);
195.                     string email = attachedObj.GetComponentInChildren<TextMeshProUGUI>().text;
196.                     Debug.Log("User is: " + email);
197.                     LoadUserData(email);
198.                     currentUserSave = email;
199.                     view.userWindow.toggleUserPanel();
200.                 break;
201.             }
202.             break;
203.  
204.             case "RacePanel":
205.             switch(type)
206.             {
207.                 // case UiEvents.MouseUp:
208.                 case UiEvents.Click:
209.                     PointerEventData eventData = utils.getValueForKey<PointerEventData>(data, "PointerEventData");
210.                     GameObject attachedObj = utils.getAttachedObject(data);
211.                    
212.                     string race = attachedObj.GetComponentInChildren<TextMeshProUGUI>().text;
213.                     // Load the race into race comparison panel
214.                     Debug.Log("Loading race " + race);
215.                     view.racesPanel.LoadRace(race);
216.                     view.racesPanel.ToggleRacePanel(true);
217.                    
218.                 break;
219.             }
220.             break;
221.  
222.             case "ImportRace":
223.             switch(type)
224.             {
225.                 case UiEvents.Click:
226.                     ImportData();
227.                 break;
228.             }
229.             break;
230.  
231.             case "ExportEmail":
232.             switch(type)
233.             {
234.                 case UiEvents.Click:
235.                     GameObject attachedObj = utils.getAttachedObject(data);
236.                     string race = attachedObj.GetComponentInChildren<TextMeshProUGUI>().text;
237.                     Debug.Log("Exporting race: " + race);
238.                     ShareRace(race);
239.                 break;
240.             }
241.             break;
242.  
243.             case "RacePanelBack":
244.             switch(type)
245.             {
246.                 // case UiEvents.MouseUp:
247.                 case UiEvents.Click:
248.                     view.racesPanel.ToggleRacePanel(false);
249.                 break;
250.             }
251.             break;
252.  
253.             case "OpenMainGraph":
254.             switch(type)
255.             {
256.                 case UiEvents.Click:
257.                 TextMeshProUGUI graphText = GameObject.FindGameObjectWithTag("Main Graph Title").GetComponent<TextMeshProUGUI>();
258.                     if (rightFooted)
259.                     {
260.                         graphText.text = "Left Graph";
261.                     } else
262.                     {
263.                         graphText.text = "Right Graph";
264.                     }
265.                     RenderGraph(currentUserForceArrayL, currentUserForceArrayR);
266.                     view.graphCanvasGroup.interactable = true;
267.                     view.graphCanvasGroup.blocksRaycasts = true;
268.                     view.graphCanvasGroup.DOFade(1, .5f);
269.                 break;
270.             }
271.             break;
272.  
273.             case "CloseMainGraph":
274.             switch(type)
275.             {
276.                 case UiEvents.Click:
277.                     view.graphCanvasGroup.interactable = false;
278.                     view.graphCanvasGroup.blocksRaycasts = false;
279.                     view.graphCanvasGroup.DOFade(0, .5f);
280.                 break;
281.             }
282.             break;
283.         } /* Eof switch block */
284.     }

 

well,the switch logic is all right. Actually I expect if your button inherits like this below.

Code (CSharp):

1. public class Button1 : UIBehaviour, IPointerClickHandler
2. {
3.  
4. }
5.  
6. public class Button2 : EventTrigger
7. {
8.  
9. }

 

Would you like the inherited class as well?

 

Code (CSharp):

1. using UnityEngine;
2. using System.Collections;
3. using System.Collections.Generic;
4. using UnityEngine.EventSystems;
5.  
6. using strange.extensions.dispatcher.eventdispatcher.impl;
7. using strange.extensions.mediation.impl;
8. using app;
9.  
10. public class ButtonMediator : Mediator {
11.  
12.     [Inject]
13.     public ButtonView view { get; set; }
14.  
15.     [Inject]
16.     public UiSignal uiSignal { get; set;}
17.  
18.     [Inject]
19.     public SystemResponseSignal systemReponseSignal {get; set;}
20.  
21.     public void uiSignalListener(string key, string type, Dictionary<string, object> data)
22.     {
23.         uiSignal.Dispatch (key, type, data);
24.     }
25.  
26.     public void systemResponseSignalListener(string key, Dictionary<string, object> data){
27.  
28.         switch(key)
29.         {
30.         case SystemResponseEvents.Start:
31.             if(view.announcePresence)
32.             {
33.                 uiSignal.Dispatch(view.buttonName, UiEvents.Presence, new Dictionary<string, object>{{"AttachedObject", view.attachedObject}});
34.             }
35.  
36.             break;
37.         }
38.     }
39.  
40.     // Use this for initialization
41.     override public void OnRegister(){
42.  
43.         //Debug.Log ("OnRegister(toolTip)");
44.  
45.         view.init ();
46.  
47.  
48.         view.uiSignal.AddListener (uiSignalListener);
49.         systemReponseSignal.AddListener(systemResponseSignalListener);
50.  
51.  
52.  
53.     }
54.  
55.     override public void OnRemove()
56.     {
57.         if(view != null)
58.             view.uiSignal.RemoveListener (uiSignalListener);
59.        
60.         if(systemReponseSignal != null)
61.             systemReponseSignal.RemoveListener(systemResponseSignalListener);
62.     }
63.  
64. }
65.  

 

My first first thought was event triggers, since those 'eat' events that the scroll rect uses. One thing to check when debugging as well is to verify the events using the event system's inspector. This can verify what you think is receiving events is actually what is receiving events. Also if this behaviour is causing you trouble, try removing it and if your scrollRect works, then its definitely that script.

 

From what I've read, the buttons in Unity do 'eat' the scroll events in the scrollRect, but I'm not exactly sure how to test for it, nor am I certain on how to remedy it. The buttons are looking for 'clicks' which shouldn't include a drag (click is fired on mouse up), so I'm confused as to why so many people have issues with buttons inside scrollrects.

Any direction would be greatly appreciated.

 

Sure ,Maybe the class Mediator 'eats' the Drag Event.

 

The extended mediator class is posted above

 

So it uses UnityEngine.EventSystem.
Maybe you could check ButtonView or SystemResponseSignal and see if they inherit from EventTrigger or IDragHandler.

 

This is ButtonView, which uses EventTrigger, and has drag events. Not sure how to fix this though.

Code (CSharp):

1. using UnityEngine;
2. using System.Collections.Generic;
3. using UnityEngine.UI;
4.  
5. using UnityEngine.EventSystems;
6.  
7. using strange.extensions.dispatcher.eventdispatcher.api;
8. using strange.extensions.mediation.impl;
9. using strange.extensions.signal.impl;
10. using strange.extensions.context.api;
11.  
12. using TMPro;
13.  
14. using app;
15.  
16. public class ButtonView : View {
17.     public string toolTip;
18.     public float tipTimeSeconds = 2.5f;
19.     public string customName;
20.     public GameObject attachedObject;
21.     public bool announcePresence = false;
22.     public bool isToggle = false;
23.     public Image indicator;
24.     public GameObject dim;
25.  
26.     public UiSignal uiSignal = new UiSignal();
27.  
28.     public System.Diagnostics.Stopwatch timer = new System.Diagnostics.Stopwatch ();
29.  
30.     bool isHover = false;
31.     bool isOn = false;
32.  
33.     Vector3 lastMouse = Vector3.zero;
34.  
35.     [HideInInspector]
36.     public string buttonName = "Unknown";
37.  
38.     public void mouseEnter(PointerEventData eventData){
39.         timer.Start ();
40.         isHover = true;
41.         lastMouse = Input.mousePosition;
42.     }
43.  
44.     public void mouseExit(PointerEventData eventData){
45.         timer.Reset ();
46.         if (toolTip != null && toolTip.Length > 0) {
47.             uiSignal.Dispatch ("ToolTip", null, new Dictionary<string, object> {
48.                 { "AttachedObject", attachedObject },
49.                 {
50.                     "Message",
51.                     toolTip
52.                 },
53.                  {
54.                     "IsVisable",
55.                     false
56.                 },
57.                  {
58.                     "PointerEventData",
59.                     eventData
60.                 }
61.             });
62.         }
63.         isHover = false;
64.     }
65.  
66.     public void mouseDown(PointerEventData eventData){
67.         timer.Reset ();
68.         timer.Start ();
69.         uiSignal.Dispatch(buttonName, UiEvents.MouseDown, new Dictionary<string, object>{{"AttachedObject", attachedObject}, {"PointerEventData", eventData}});
70.         if (indicator != null) {
71.             indicator.gameObject.SetActive (true);
72.         }
73.  
74.         if (dim != null) {
75.             dim.SetActive(false);
76.         }
77.  
78.     }
79.  
80.     public void mouseUp(PointerEventData eventData){
81.         timer.Reset ();
82.         timer.Start ();
83.         uiSignal.Dispatch(buttonName, UiEvents.MouseUp, new Dictionary<string, object>{{"AttachedObject", attachedObject}, {"PointerEventData", eventData}});
84.         if (indicator != null) {
85.             indicator.gameObject.SetActive (false);
86.         }
87.  
88.         if (dim != null) {
89.             dim.SetActive(true);
90.         }
91.  
92.     }
93.  
94.     public void beginDrag(PointerEventData eventData){
95.         timer.Reset ();
96.         timer.Start ();
97.         uiSignal.Dispatch(buttonName, UiEvents.BeginDrag, new Dictionary<string, object>{{"AttachedObject", attachedObject}, {"PointerEventData", eventData}});
98.     }
99.  
100.     public void endDrag(PointerEventData eventData)
101.     {
102.         timer.Reset ();
103.         timer.Start ();
104.         uiSignal.Dispatch(buttonName, UiEvents.EndDrag,  new Dictionary<string, object>{{"AttachedObject", attachedObject}, {"PointerEventData", eventData}});
105.     }
106.  
107.     public void drag(PointerEventData eventData)
108.     {
109.         timer.Reset ();
110.         timer.Start ();
111.         uiSignal.Dispatch(buttonName, UiEvents.Drag, new Dictionary<string, object>{{"AttachedObject", attachedObject}, {"PointerEventData", eventData}});
112.     }
113.  
114.     public void setOn(bool _isOn){
115.         isOn = _isOn;
116.  
117.         if (isOn) {
118.             if (indicator != null) {
119.                 indicator.gameObject.SetActive (true);
120.             }
121.  
122.             if (dim != null) {
123.                 dim.SetActive(false);
124.             }
125.  
126.         } else {
127.             if (indicator != null) {
128.                 indicator.gameObject.SetActive (false);
129.             }
130.  
131.             if (dim != null) {
132.                 dim.SetActive(true);
133.             }
134.         }
135.     }
136.  
137.     public void click(PointerEventData eventData)
138.     {
139.         timer.Reset ();
140.         timer.Start ();
141.  
142.         if (isToggle) {
143.  
144.             isOn = !isOn;
145.  
146.             if (isOn) {
147.                 if (indicator != null) {
148.                     indicator.gameObject.SetActive (true);
149.                 }
150.  
151.                 if (dim != null) {
152.                     dim.SetActive(false);
153.                 }
154.  
155.                 uiSignal.Dispatch(buttonName + " On", UiEvents.Click, new Dictionary<string, object>{{"AttachedObject", attachedObject}, {"PointerEventData", eventData}});
156.             } else {
157.                 if (indicator != null) {
158.                     indicator.gameObject.SetActive (false);
159.                 }
160.  
161.                 if (dim != null) {
162.                     dim.SetActive(true);
163.                 }
164.                 uiSignal.Dispatch(buttonName + " Off", UiEvents.Click, new Dictionary<string, object>{{"AttachedObject", attachedObject}, {"PointerEventData", eventData}});
165.             }
166.  
167.         } else {
168.             uiSignal.Dispatch(buttonName, UiEvents.Click, new Dictionary<string, object>{{"AttachedObject", attachedObject}, {"PointerEventData", eventData}});
169.         }
170.  
171.     }
172.  
173.     public void setName(string name)
174.     {
175.         buttonName = name;
176.         customName = name;
177.     }
178.  
179.  
180.     public void init()
181.     {
182.  
183.         if (customName == null || customName.Length == 0)
184.             buttonName = gameObject.name;
185.         else
186.             buttonName = customName;
187.  
188.         timer.Reset ();
189.  
190.         EventTrigger trigger = gameObject.GetComponent<EventTrigger> ();
191.  
192.         if (trigger == null) {
193.             trigger = gameObject.AddComponent<EventTrigger> ();
194.         }
195.  
196.         EventTrigger.Entry pointerEnter = new EventTrigger.Entry();
197.         pointerEnter.eventID = EventTriggerType.PointerEnter;
198.         pointerEnter.callback.AddListener((eventData) => { mouseEnter((PointerEventData)eventData); } );
199.         trigger.triggers.Add(pointerEnter);
200.  
201.         EventTrigger.Entry pointerExit = new EventTrigger.Entry();
202.         pointerExit.eventID = EventTriggerType.PointerExit;
203.         pointerExit.callback.AddListener((eventData) => { mouseExit((PointerEventData)eventData); } );
204.         trigger.triggers.Add(pointerExit);
205.  
206.         EventTrigger.Entry pointerDown = new EventTrigger.Entry();
207.         pointerDown.eventID = EventTriggerType.PointerDown;
208.         pointerDown.callback.AddListener((eventData) => { mouseDown((PointerEventData)eventData); } );
209.         trigger.triggers.Add(pointerDown);
210.  
211.         EventTrigger.Entry pointerUp = new EventTrigger.Entry();
212.         pointerUp.eventID = EventTriggerType.PointerUp;
213.         pointerUp.callback.AddListener((eventData) => { mouseUp((PointerEventData)eventData); } );
214.         trigger.triggers.Add(pointerUp);
215.  
216.         EventTrigger.Entry beginDragEvent = new EventTrigger.Entry();
217.         beginDragEvent.eventID = EventTriggerType.BeginDrag;
218.         beginDragEvent.callback.AddListener((eventData) => { beginDrag((PointerEventData)eventData); } );
219.         trigger.triggers.Add(beginDragEvent);
220.  
221.         EventTrigger.Entry endDragEvent = new EventTrigger.Entry();
222.         endDragEvent.eventID = EventTriggerType.EndDrag;
223.         endDragEvent.callback.AddListener((eventData) => { endDrag((PointerEventData)eventData); } );
224.         trigger.triggers.Add(endDragEvent);
225.  
226.         EventTrigger.Entry dragEvent = new EventTrigger.Entry();
227.         dragEvent.eventID = EventTriggerType.Drag;
228.         dragEvent.callback.AddListener((eventData) => { drag((PointerEventData)eventData); } );
229.         trigger.triggers.Add(dragEvent);
230.  
231.         EventTrigger.Entry clickEvent = new EventTrigger.Entry();
232.         clickEvent.eventID = EventTriggerType.PointerClick;
233.         clickEvent.callback.AddListener((eventData) => { click((PointerEventData)eventData); } );
234.         trigger.triggers.Add(clickEvent);
235.  
236.     }
237.  
238.     private string _text;
239.  
240.     public string text{
241.         get{ return _text;}
242.         set{
243.             _text = value;
244.  
245.             TextMeshProUGUI[] texts = gameObject.GetComponentsInChildren<TextMeshProUGUI> (true);
246.  
247.             for (int i = 0; i < texts.Length; i++) {
248.                 texts [i].text = _text;
249.             }
250.         }
251.     }
252.  
253.     // Update is called once per frame
254.     void Update () {
255.  
256.         if(toolTip != null && toolTip.Length > 0)
257.         {
258.             if (timer.ElapsedMilliseconds >= tipTimeSeconds * 1000) {
259.                 uiSignal.Dispatch("ToolTip", null, new Dictionary<string, object>{{"Message", toolTip},{"IsVisable", true}});
260.             }
261.  
262.             if (isHover) {
263.                 if (lastMouse.x != Input.mousePosition.x || lastMouse.y != Input.mousePosition.y) {
264.                     timer.Reset ();
265.                     timer.Start ();
266.                     uiSignal.Dispatch("ToolTip", null, new Dictionary<string, object>{{"Message", toolTip},{"IsVisable", false}});
267.  
268.                     lastMouse = Input.mousePosition;
269.                 }
270.             }
271.         }
272.     }
273. }
274.  

 

That's it ,the button overrides the Ondrag interface and eats the drag event.
To fix this,you have to create a new class to contain the code that only deals with ClickEvent from View.
and let the buttonView inherits from the new base class.

Here is the sample code.

Code (CSharp):

1.  
2.  
3.     public class PointClickListener : MonoBehaviour, IPointerClickHandler
4.     {
5.         public delegate void VoidDelegate(PointerEventData data);
6.         public VoidDelegate onClick;
7.         static public PointClickListener Get(UnityEngine.GameObject go)
8.         {
9.             return go.GetComponent<PointClickListener>() ??go.AddComponent<PointClickListener>();
10.         }
11.         public void OnPointerClick(PointerEventData eventData)
12.         {
13.             if (onClick != null)
14.             {
15.                 onClick(eventData);
16.             }
17.         }
18.     }
19.  
20.  

 

Couldn't I just add it in the class that's already been defined?

 

Sure,what ever you like. Just ensure that the button should take the right event.

 

My confusion is how to disregard the click if a drag overrides it.

Technically its the scroll rect that's taking the drag, but it seems as though it's never passed.

Do I just pass the event through to its parent? Is there a method for doing so?

 

Unfortunately,the native EventSystem doesn't support passing through event.You have to do that yourself.
Check this thread
https://forum.unity.com/threads/passing-an-event-through-to-the-next-object-in-the-raycast.266614/

 

I'm not even sure where to begin with that. It's crazy that something this simple (in my opinion) is nearly impossible in Unity.

What an oversight.