Fix #5593

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

@@ -18,8 +18,7 @@ export class ScrollViewer extends Rectangle {
     private _horizontalBar: ScrollBar;
     private _verticalBar: ScrollBar;
     private _barColor: string;
-    private _barBorderColor: string;
-    private _barBackground: string ;
+    private _barBackground: string;
     private _barSize: number = 20;
     private _endLeft: number;
     private _endTop: number;
@@ -246,21 +245,6 @@ export class ScrollViewer extends Rectangle {
         }
     }
 
-    /** Gets or sets the bar color */
-    public get barBorderColor(): string {
-        return this._barBorderColor;
-    }
-
-    public set barBorderColor(color: string) {
-        if (this._barBorderColor === color) {
-            return;
-        }
-
-        this._barBorderColor = color;
-        this._horizontalBar.borderColor = color;
-        this._verticalBar.borderColor = color;
-    }
-
     /** Gets or sets the bar background */
     public get barBackground(): string {
         return this._barBackground;
@@ -368,7 +352,7 @@ export class ScrollViewer extends Rectangle {
         let scene = this._host.getScene();
         if (scene && this._onPointerObserver) {
             scene.onPointerObservable.remove(this._onPointerObserver);
-            this._onPointerObserver  = null;
+            this._onPointerObserver = null;
         }
         super.dispose();
     }

gui/src/2D/controls/sliders/scrollBar.ts

@@ -75,12 +75,7 @@ export class ScrollBar extends BaseSlider {
         const thumbPosition = this._getThumbPosition();
         context.fillStyle = this._background;
 
-        if (this.isVertical) {
-            context.fillRect(left, top, width, height + this._effectiveThumbThickness);
-        }
-        else {
-            context.fillRect(left, top, width + this._effectiveThumbThickness, height);
-        }
+        context.fillRect(this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
 
         // Value bar
         context.fillStyle = this.color;
@@ -99,7 +94,7 @@ export class ScrollBar extends BaseSlider {
             this._thumbMeasure.height = this._currentMeasure.height;
         }
 
-        context.fillRect(this._thumbMeasure.left, this._thumbMeasure.top, this._thumbMeasure.width , this._thumbMeasure.height);
+        context.fillRect(this._thumbMeasure.left, this._thumbMeasure.top, this._thumbMeasure.width, this._thumbMeasure.height);
 
         context.restore();
     }

inspector/src/components/actionTabs/tabs/propertyGrids/gui/scrollViewerPropertyGridComponent.tsx

@@ -32,7 +32,6 @@ export class ScrollViewerPropertyGridComponent extends React.Component<IScrollVi
                 <LineContainerComponent title="SCROLLVIEWER">
                     <FloatLineComponent lockObject={this.props.lockObject} label="Bar size" target={scrollViewer} propertyName="barSize" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                     <TextInputLineComponent lockObject={this.props.lockObject} label="Bar color" target={scrollViewer} propertyName="barColor" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
-                    <TextInputLineComponent lockObject={this.props.lockObject} label="Bar border color" target={scrollViewer} propertyName="barBorderColor" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                     <TextInputLineComponent lockObject={this.props.lockObject} label="Bar background" target={scrollViewer} propertyName="barBackground" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                     <FloatLineComponent lockObject={this.props.lockObject} label="Wheel precision" target={scrollViewer} propertyName="wheelPrecision" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                 </LineContainerComponent>