Scroll elements with only the scrollbar

Unity Engine
1

How to make elements scrollable with only the scrollbar?
Currently it is possible to use both the scrollbar to scroll the element and to click and drag the element itself. However, the latter is not desired.

Thank you!

2

For a ScrollRect? You could subclass it and override its behaviour.

1 Like
3

Yes, I have a gameobject “MapList”. This has the Mask Image, Mask and ScrollRect components. This object has 2 children. One is the “Grid” where I am instantiating map ui elements. And the second on is the “Scrollbar”. The grid has the Image, Content Size Fitter and Vertical Layout Group components. Viewport of ScrollRect is the “Scrollbar” gameobject and the Content of ScrollRect is the “Grid” gameobject.

4

Okay… I always make my ScrollRect designs like so:
ScrollRect
-(child) viewport
-(child of viewport) content portion (this is where I’d put grids)
-(child of scrollrect) - scroll bars

I think that’s right. When you add ‘scrollview’ to the scene, the scrollbars and that layout should all be proper anyways.

There is code that deals with dragging, the scrollwheel on the mouse, and the scrollbars, I"m pretty sure.
So, if you subclassed ScrollRect you could override the behaviour for things you wanted to change or ignore.

Have you tried it?

5

I read other threads and I found that if I set the Horizontal/Vertical boxes to false in Scroll Rect then it should work. Problem is that if I disable the vertical (not using horizontal) flag, the scrollbar is automatically disabled. Is this a bug or an intended behaviour?

6

Not sure, but it sounds reasonable that if you disable both scroll options the bar isn’t there.

No word on whether you tried my previous suggestion? :slight_smile:

7

I tried but this stops the scrollbar from working. Other people are saying that if you disable the Horizontal/Vertical boxes then it works for them. For me it just disables the scrollbar.

8

So, you made a subclass & modified the overrode the behaviour of dragging and that didn’t work for you?

9

I did not try creating a subclass. Isn’t there really a simpler and less time consuming method for making the content not scrollable by dragging the content itself but rather just the scrollbar?

10

Hm. I was about to say ‘no’ However, if you disable every ‘raycast target’ option on every image in the scroll view and content and viewport (just tested this)… then sure, you can accomplish that.
Then, however, you can’t get any response if you ever want to click/select anything in there.

This is all I had to do to avoid dragging.

using UnityEngine;
using UnityEngine.UI;
using UnityEngine.EventSystems;
public class ScrollDerived : ScrollRect {

    public override void OnDrag(PointerEventData eventData)
    {
        //  base.OnDrag(eventData);
        print("Trying drag...but nothing happened.. Woah!? :)"); // definitely delete this when you get to using it :)
    }
}
11

Thank you!

Disabling the raycast should work, yes, however with the disadvantage you described.
I’ll try the code your provided and let know how it works out.

12

:slight_smile: Cool. np

13

Just commenting because this is the first thing that comes up in a search, and maybe it could be helpful to someone else.

After unsuccessfully trying quite a lot of different ways of achieving this, the simplest, although by brute force, solution that I’ve found is to simply create another image and place it towards the bottom of your hierarchy. Place it inside the canvas, but definitely below/past everything that has anything to do with scrolling, the scroll area, the content, etc…

In the editor window, place the image directly on top of the area containing the content that you want to be able to scroll from the scrollbar, but not be able to be scrolled within the area itself. Make sure that it covers it up. You do not want to be able to see your content. Press play, and make sure that you can’t scroll in the area anymore. Then, go back into the editor and turn the opacity all the way down until it is transparent.

You’ve just applied a protective, non-scrollable, clear coat :slight_smile: !!

2 Likes