[UMG] Smooth scrolling in scrollbox?

Oh, I forgot to mention that. I need
the 1st option

Overriden onKeyDown:

Calls custom Scroll event:

Scrollbox’ Navigation Destination is set to Center since it makes sense in most cases. The script counts the direct children of the Scrollbox, wraps the Next Element int value, fetches it from the parent panel’s array and uses it to Scroll [that] Widget into View.

Image from Gyazo

1 Like

I made a horizontal scrollbox menu which requies a smooth scrolling inside it. I have no idea how to implement this.
Also I’m using keyboard as navigation method.

Define smooth scrolling:

  • you want to scroll to the next element when you tap a key
  • you want to scroll by a fixed amount when you tap a key
  • you want to hold the key and scroll in a linear fashion
  • you want to hold the key and accelerate scrolling the longer you hold until desired max scroll speed is reached

Oh, I forgot to mention that. I need the 1st option

Thanks, it works! But mine scrollbox has spacers between buttons, how I can skip them when scrolling?

I don’t have a “get all children” node. Will it work with “get children count?”

You do, and it could, actually. Are you dragging the wire from the scroll box?

Image from Gyazo

Yes. Maybe I have different engine version.

Ok, I take it back! You don’t have it. Could you please do me a favour and try this:

Different engine version,

You’re on 4.20, this widget has been there since 4.2 - 4 years or thereabout.

275859-scrollbox-panel.png

All right then. This should also work:

So weird, as unlikely as I find it, I guess the support for getting All Children of that particular panel was not exposed in 4.20. Thinking about it, they did update the scrollbox some time ago…

Oh, you should, ideally, have Scrolling Destination as Centre, not Into View as I did above. I say one thing, and attach screenshot with another…

Where’s my coffee…

1 Like

Do not skip them, get rid of them. Use padding instead:

Scrollbox panel creates a slot for the child and each child can have unique padding. It has the added benefit of simplifying everything and is quite flexible; also, less widgets = more performance.


If you must use a Spacer (as it might be a vital element of the design in some cases), you could scroll to every 2nd element. Next Element +2 (instead of 1). You just need to ensure you’ve inserted an even number of spacers.

Another solution is to check whether the next element is a spacer and if that’s true, skip to the child+1, and increase Next Element accordingly.

1 Like