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.
