ScrollingFrame Changes

Hi developers!

We’re in the process of rolling out some upcoming changes to ScrollingFrames, including:

  • Smooth scrolling for mouse wheels (enabled now)
  • Trackpad input support (enabled now)
  • Layout refinements (next week)

Over the past couple of weeks we’ve turned on some cool new features for ScrollingFrames. Next week we’re planning to turn on some major improvements to how they lay themselves out. This will resolve a few of the bugs that have been reported recently, as well as some other inconsistencies we’ve noticed internally. There are some changes that you might notice where we cleaned up some ambiguous cases in the API.

Smooth scrolling

A few weeks ago, we turned on smooth scrolling for the mouse wheel. Now, when you scroll, the frame will smoothly animate to its new canvas position. As part of this, CanvasPosition will now fire a property changed event every frame while the animation is playing. If you notice performance problems while scrolling, check your CanvasPosition event listeners and try to minimize the amount of work they do.

Trackpad scrolling support

Last week, we turned on dedicated trackpad support for ScrollingFrames. For those of you with a horizontal scroll wheel on your mouse, you’ll also notice that we now support those as well. There are some caveats that you’ll have to be aware of here. Trackpad support is limited by hardware availability, much like the trackpad camera controls that we shipped last year. Mac devices will support this unconditionally; Windows devices may not, depending on your system’s hardware and drivers. If your system can’t support it, nothing will change - you’ll still be able to scroll as you could before.

Layout changes

The core of the upcoming changes to scrolling frames is a new algorithm for determining which scroll bars we display. This new algorithm will make sure that when you ask for a given canvas size, you’ll always be able to use that entire canvas space, even if some scroll bars are visible. As a result of this, you may notice the horizontal scroll bar appearing where it didn’t before.

One concrete case where we’ve seen this happen is when you set CanvasSize.X to have a scale value of 1, even though the scrolling frame is only intended to scroll vertically. In this case, when the vertical scroll bar appears, the horizontal scroll bar will also appear, to ensure you can scroll to view the space that the vertical scroll bar now obscures.

Tips for setting up your scrolling frames

In general, if you have a scrolling frame that’s intended to only scroll in one direction, you should always set the ScrollingDirection property appropriately. This property is a hard override on scroll bar visibility - if ScrollingDirection is set to Y, the horizontal scroll bar will never be visible, regardless of what other properties are set to.

In order to help resolve some confusion I’d like to clarify the behavior of the scroll bar inset properties. The developer hub will be updated in the near future with this information as well.

VerticalScrollBarInset and HorizontalScrollBarInset only work if the canvas size on the axis they affect is set to 0 (or, more specifically, smaller than the window size). If you use these properties, set the canvas size on that axis to 0 - for VerticalScrollBarInset, set the canvas width to 0, and for HorizontalScrollBarInset, set the canvas height to 0.

Detailed explanation of what these properties do, for the curious

These properties affect a metric called the minimum absolute canvas size internally. What this means is that if you set CanvasSize to be too big, these properties don’t actually do anything!

If you set an inset property to Always, the minimum absolute canvas size becomes equal to the minimum window size: what AbsoluteWindowSize would be if both scroll bars were visible.

If you set an inset property to ScrollBar, the minimum absolute canvas size becomes equal to AbsoluteWindowSize.

If you set an inset property to Never, the minimum absolute canvas size becomes equal to AbsoluteSize.

It’s important to note that this metric is minimum canvas size: if you set CanvasSize to be bigger than this, then these properties don’t have an effect. In order for them to work, you need to set CanvasSize to something lower than the minimum, which in practice should probably be 0.

180 Likes

This topic was automatically opened after 16 minutes.

Scrolling is love, scrolling is life.

24 Likes

Awesome! Don’t tell anyone but UI updates are my favorite :heart_eyes:

12 Likes

This would truly be an amazing improvement for the scrolling frames, also the fact that scrolling would now be smoother is even better, I cannot wait to try these features out myself, also hyped for the upcoming features.

4 Likes

I love UI updates. Makes the interface seem better and better with every tweak.

5 Likes

May Scrolling live on.
Roblox truely do be pushing so many updates.

3 Likes

I was actually just thinking about the scrolling interface and I’m really glad it’s been improved.

1 Like

So interesting, madattak just made an topic about updating the ScrollingFrame, and after some minutes or even seconds, this post/topic was created, what a coincidence.

2 Likes

These changes are really good!

1 Like

Honest to God scrolling updates are so cool like scrolling and the bar slowly drop down like a liquid rlly helps a games overall style

1 Like

You say to set ‘height’ on both of them… is that correct or is one supposed to be width?

1 Like

Good catch! For VerticalScrollBarInset it should be canvas width, not height. I’ve updated the post.

7 Likes

Thank you so much! I think that this has needed some work! And here we go! :grinning:

1 Like

Will we get properties to customize the smoothness of the scroll?

4 Likes

I’d appreciate if you guys could fix this issue with using ScrollingFrames in conjunction with UIPageLayout at some point too: Cannot Swipe to Navigate when UIPageLayout Contains ScrollingFrame

The intention was that portrait-mode users could swipe between pages, but the ScrollingFrame sinks the input.

1 Like

We should have an option to decrease and minimize the smooth scrolling animation. I always hated them, especially on UIs with a lot of elements. They make me awkwardly feel like I should be scrolling more than I have to.

This is really cool! Two related issues with scrolling; firstly, it’s way too sensitive on my laptop as even the smallest movements cause the scrolling to ‘jump’ as if I had scrolled with a regular mouse.

Secondly, it still doesn’t seem to support continuous scrolling with my precision mouse. Instead of scrolling continuously (similar to a trackpad), it does the same thing except with normal sensitivity, as if I’m using a regular mouse with a ‘clicky’ scroll wheel.

My laptop is a Surface Laptop 2 (using Microsoft’s precision drivers) and my mouse is the Surface Ergonomic Mouse if that helps.

1 Like

Will this update fix the scroll bar images not alligning properly when scrolling?

3 Likes