Expose scrollBiewer scrollbars and fix scroll updates when content change

dist/preview release/gui/babylon.gui.d.ts

@@ -2112,6 +2112,14 @@ declare module BABYLON.GUI {
      */
     export class ScrollViewer extends Rectangle {
             /**
+                * Gets the horizontal scrollbar
+                */
+            readonly horizontalBar: ScrollBar;
+            /**
+                * Gets the vertical scrollbar
+                */
+            readonly verticalBar: ScrollBar;
+            /**
                 * Adds a new control to the current container
                 * @param control defines the control to add
                 * @returns the current container
@@ -3030,4 +3038,27 @@ declare module BABYLON.GUI {
             getClassName(): string;
             static Parse(source: any, scene: BABYLON.Scene, rootUrl: string): FluentMaterial;
     }
+}
+declare module BABYLON.GUI {
+    /**
+        * Class used to create slider controls
+        */
+    export class ScrollBar extends BaseSlider {
+            name?: string | undefined;
+            /** Gets or sets border color */
+            borderColor: string;
+            /** Gets or sets background color */
+            background: string;
+            /**
+                * Creates a new Slider
+                * @param name defines the control name
+                */
+            constructor(name?: string | undefined);
+            protected _getTypeName(): string;
+            protected _getThumbThickness(): number;
+            _draw(context: CanvasRenderingContext2D): void;
+            /** @hidden */
+            protected _updateValueFromPointer(x: number, y: number): void;
+            _onPointerDown(target: Control, coordinates: BABYLON.Vector2, pointerId: number, buttonIndex: number): boolean;
+    }
 }

dist/preview release/gui/babylon.gui.module.d.ts

@@ -2263,11 +2263,20 @@ declare module 'babylonjs-gui/2D/controls/scrollViewers/scrollViewer' {
     import { Container } from "babylonjs-gui/2D/controls/container";
     import { Nullable } from "babylonjs";
     import { AdvancedDynamicTexture, Measure } from "2D";
+    import { ScrollBar } from "babylonjs-gui/2D/controls/sliders/scrollBar";
     /**
         * Class used to hold a viewer window and sliders in a grid
      */
     export class ScrollViewer extends Rectangle {
             /**
+                * Gets the horizontal scrollbar
+                */
+            readonly horizontalBar: ScrollBar;
+            /**
+                * Gets the vertical scrollbar
+                */
+            readonly verticalBar: ScrollBar;
+            /**
                 * Adds a new control to the current container
                 * @param control defines the control to add
                 * @returns the current container
@@ -3260,6 +3269,33 @@ declare module 'babylonjs-gui/3D/materials/fluentMaterial' {
     }
 }
 
+declare module 'babylonjs-gui/2D/controls/sliders/scrollBar' {
+    import { BaseSlider } from "babylonjs-gui/2D/controls/sliders/baseSlider";
+    import { Control } from "babylonjs-gui/2D/controls";
+    import { Vector2 } from "babylonjs";
+    /**
+        * Class used to create slider controls
+        */
+    export class ScrollBar extends BaseSlider {
+            name?: string | undefined;
+            /** Gets or sets border color */
+            borderColor: string;
+            /** Gets or sets background color */
+            background: string;
+            /**
+                * Creates a new Slider
+                * @param name defines the control name
+                */
+            constructor(name?: string | undefined);
+            protected _getTypeName(): string;
+            protected _getThumbThickness(): number;
+            _draw(context: CanvasRenderingContext2D): void;
+            /** @hidden */
+            protected _updateValueFromPointer(x: number, y: number): void;
+            _onPointerDown(target: Control, coordinates: Vector2, pointerId: number, buttonIndex: number): boolean;
+    }
+}
+
 
 /*Babylon.js GUI*/
 // Dependencies for this module:
@@ -5375,6 +5411,14 @@ declare module BABYLON.GUI {
      */
     export class ScrollViewer extends Rectangle {
             /**
+                * Gets the horizontal scrollbar
+                */
+            readonly horizontalBar: ScrollBar;
+            /**
+                * Gets the vertical scrollbar
+                */
+            readonly verticalBar: ScrollBar;
+            /**
                 * Adds a new control to the current container
                 * @param control defines the control to add
                 * @returns the current container
@@ -6293,4 +6337,27 @@ declare module BABYLON.GUI {
             getClassName(): string;
             static Parse(source: any, scene: BABYLON.Scene, rootUrl: string): FluentMaterial;
     }
+}
+declare module BABYLON.GUI {
+    /**
+        * Class used to create slider controls
+        */
+    export class ScrollBar extends BaseSlider {
+            name?: string | undefined;
+            /** Gets or sets border color */
+            borderColor: string;
+            /** Gets or sets background color */
+            background: string;
+            /**
+                * Creates a new Slider
+                * @param name defines the control name
+                */
+            constructor(name?: string | undefined);
+            protected _getTypeName(): string;
+            protected _getThumbThickness(): number;
+            _draw(context: CanvasRenderingContext2D): void;
+            /** @hidden */
+            protected _updateValueFromPointer(x: number, y: number): void;
+            _onPointerDown(target: Control, coordinates: BABYLON.Vector2, pointerId: number, buttonIndex: number): boolean;
+    }
 }

gui/src/2D/controls/scrollViewers/scrollViewer.ts

@@ -30,6 +30,20 @@ export class ScrollViewer extends Rectangle {
     private _clientHeight: number;
 
     /**
+     * Gets the horizontal scrollbar
+     */
+    public get horizontalBar(): ScrollBar {
+        return this._horizontalBar;
+    }
+
+    /**
+     * Gets the vertical scrollbar
+     */
+    public get verticalBar(): ScrollBar {
+        return this._verticalBar;
+    }
+
+    /**
      * Adds a new control to the current container
      * @param control defines the control to add
      * @returns the current container
@@ -294,6 +308,19 @@ export class ScrollViewer extends Rectangle {
         this._endLeft = this._clientWidth - windowContentsWidth;
         this._endTop = this._clientHeight - windowContentsHeight;
 
+        const newLeft = this._horizontalBar.value * this._endLeft + "px";
+        const newTop = this._verticalBar.value * this._endTop + "px";
+
+        if (newLeft !== this._window.left) {
+            this._window.left = newLeft;
+            this._rebuildLayout = true;
+        }
+
+        if (newTop !== this._window.top) {
+            this._window.top = newTop;
+            this._rebuildLayout = true;
+        }
+
         let horizontalMultiplicator = this._clientWidth / windowContentsWidth;
         let verticalMultiplicator = this._clientHeight / windowContentsHeight;