ScrollRect doesn't scroll when clicking/dragging between items

I have a ScrollRect whose Content property is set to a HorizontalLayout container that is the parent to the list of items the user can scroll between. So it looks like this:

Scroller (ScrollRect)

Container (HorizontalLayout, Scroller's Content)

Item
Item
Item​

This works great, as long as the user clicks directly on an item to scroll. If the user clicks in between items, then no scrolling takes place.

How can I make the ScrollRect scroll anywhere on Container, including in between the items?

Thank you.

 

Do you have a background image element in the Scroller or Container? I encountered a similar problem when I disabled the image, had to enable it and put the alpha to 0.

 

Right, no there isn't a function or method you can call to move the content within a ScrollRect, all the necessary bits are private / protected in the ScrollRect component.
However, the way the ScrollRect works is that it moves the transform position of the Content GameObject.

So to move / step up the Content GameObject you will need a script to alter the Content GO position, which is very simple.
However I'd also look at the ScrollRect source (In the UI Bitbucket repo) and use a similar method that it uses to ensure the Content GO stays within the bounds of the ScrollRect area.
Once you have your script, call the method in your script from the Button on click event (either in the editor or in code) and hay presto.
I did a little sample and tested it, if you need it let me know.

 

That was it. Once I added an Image (with no sprite) and set the alpha to 0, I got the behavior that I wanted.

Thank you.

 

Necroing here but I got into a place where the ScrollRect viewport won't scroll if I mouse-drag it. The solution was to flag the Viewport a Raycast Target. This also activated the mouse wheel scroll.