Simultaneous Vertical and Horizontal Scrolling

Unity Engine
1

Hi, I’ve started working with UIElements this week, and I think I’ve stumbled into an issue regarding the ScrollView VisualElement. I’m attempting to achieve a double sided scroll, since internally, the diagram will be potentially be increasing in both dimensions. However, I can’t seem to stop the #unity-content-container and #unity-content-viewport dimensions from tracking each other.

In my investigation, it seems that when I set flex-direction (in uss) to ‘row’ on the #unity-content-viewport, the horizontal scrolling becomes allowed, as widths of ‘viewport’ and ‘container’ stop tracking each other, and similarly if flex-direction is set to ‘column’, vertical scrolling becomes allowed.

Any advice on how I can achieve this functionality? Can I set the #unity-content-container to grow according to its content only? Thank you.

2

Hi MomoRazor,

You can have a ScrollView that is configured to scroll in both direction by passing ScrollViewMode.VerticalAndHorizontal to the ScrollView constructor.

More information can be found here : Unity - Scripting API: UIElements.ScrollViewMode.VerticalAndHorizontal

3

I’ve instantiated the ScrollView within UXML, not C#, so how do set the ScrollViewMode as such for a UXML ScrollView? I’ve already set show-horizontal-scroller=“true” and show-vertical-scroller=“true”

4

From within UXML you can set the “mode” attribute to “VerticalAndHorizontal”

1 Like
5

Thanks that works perfectly! Could you point to where this is documented in the UIElements documentations? Because I couldn’t seem to find it and it’s quite an important attribute to know about for the ScrollView VisualElement. Thanks again for the support!

1 Like
6

There’s the scripting API:

7

Hi @uDamian , I would like to create an editor window, which is similar to the unity profiler, where I want to enable horizontal scrolling to see through the data horizontally.

I am wondering whether my mac book’s trackpad horizontal scrolling is supported by unity UI elements or not! On the other side, this is a very basic functionality. Any help here!

The sample code snippet below.

using UnityEditor;
using UnityEngine;
using UnityEngine.UIElements;
public class HorizontalScrollWindow : EditorWindow
{
     [MenuItem("Test/Open")]
     public static void ShowWindow()
     {
         var window = GetWindow<HorizontalScrollWindow>();
         window.titleContent = new GUIContent("HorizontalScrollWindow");
     }
    
     public void OnEnable()
     {
         rootVisualElement.Add(new CustomScrollView());
         rootVisualElement.style.flexDirection = FlexDirection.Row;
     }
     class CustomScrollView : ScrollView
     {
         public CustomScrollView() : base(ScrollViewMode.Horizontal)
         {
             style.flexGrow = new StyleFloat(1f);
             for (int i = 0; i < 400; i++)
             {
                 base.contentContainer.Add(new Button()
                 {
                     text = "hello: " + i
                 });
             }
         }
     }
}

6161737--673783--horizotal_scrolling_not_working.png
6161737--673783--horizotal_scrolling_not_working.png1318×766 9.33 KB

8

There’s some limitations to what Unity’s core supports in terms of the mac trackpad in the Editor. These limitations prevent UI Toolkit from supporting the trackpad fully. Otherwise, for when the trackpad is interpreted like a mouse wheel move, scrolling should work.

9

Out of the box, Windows10, using the code @uDamian posted above: horizontal scrolling in UIToolkit never works on trackpads (seen it on a few Windows machines).

According to bug tracker, guessing (because Unity doesn’t allow any of us outside Unity to see what the actual bug is) it appears this is a known bug that was patched in 2021 betas only: Unity Issue Tracker - [UI Toolkit] [UI Builder] ScrollView horizontal scrolling via scroll wheel does not scroll

TL;DR: write your own Scrollview that works, or don’t use UIToolkit until 2021 is out of beta.