How can I have a UI ScrollRect still scroll if pressing a button inside of it?

I’ve built a simple UI scene where players can switch the language of the game, and it’s in a scrolling list because there are many languages to choose from.

The hierarchy is ScrollRect > Panel (background image) > List of Buttons.

Now, if I tap on a button, it works fine and changes the language as expected. If I tap and drag anywhere around the buttons (on the background panel), the scroll rect scrolls up and down, again as expected . The problem is that it’s impossible to tap and drag from inside a button, the scroll rect just won’t work in that case, and it feels like bad UX. The desired behaviour is that if I tap and drag inside a button, the OnClick of the button is cancelled, and the scrollrect begins to scroll. How can I accomplish this?

Sorry but i dont seem to get it … i am facing the same problem having a horizontal scrollrect > panel > button … i have added drag event via EventTrigger on the button … what i need is that the scroll drags if drag is horizontal and the button drags if drag is vertical from the button