chore(*): Move logic for calculating scroll size to base helper.

Author: skrustev

projects/igniteui-angular/src/lib/directives/for-of/base.helper.component.ts

@@ -52,4 +52,19 @@ export class VirtualHelperBaseDirective implements OnDestroy, AfterViewInit {
     public get size() {
         return this._size;
     }
+
+    public get scrollNativeSize() {
+        const div = document.createElement('div');
+        const style = div.style;
+        style.width = '100px';
+        style.height = '100px';
+        style.position = 'absolute';
+        style.top = '-10000px';
+        style.top = '-10000px';
+        style.overflow = 'scroll';
+        document.body.appendChild(div);
+        const scrollWidth = div.offsetWidth - div.clientWidth;
+        document.body.removeChild(div);
+        return scrollWidth ? scrollWidth + 1 : 1;
+    }
 }

projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts

@@ -709,8 +709,12 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
         return this.sizesCache[index + 1] - this.sizesCache[index];
     }
 
-    public getScrollbarWidth() {
-        return this.scrollComponent ? (this.scrollComponent as VirtualHelperComponent).scrollWidth : 0;
+    /**
+     * @hidden
+     * Function that is called to get the native scrollbar size that the browsers renders.
+     */
+    public getScrollNativeSize() {
+        return this.scrollComponent ? this.scrollComponent.scrollNativeSize : 0;
     }
 
     /**

projects/igniteui-angular/src/lib/directives/for-of/virtual.helper.component.ts

@@ -25,22 +25,6 @@ export class VirtualHelperComponent extends VirtualHelperBaseDirective implement
     }
 
     ngOnInit() {
-        this.scrollWidth = this.getScrollWidth();
+        this.scrollWidth = this.scrollNativeSize;
     }
-
-    private getScrollWidth() {
-        const div = document.createElement('div');
-        const style = div.style;
-        style.width = '100px';
-        style.height = '100px';
-        style.position = 'absolute';
-        style.top = '-10000px';
-        style.top = '-10000px';
-        style.overflow = 'scroll';
-        document.body.appendChild(div);
-        const scrollWidth = div.offsetWidth - div.clientWidth;
-        document.body.removeChild(div);
-        return scrollWidth ? scrollWidth + 1 : 1;
-    }
-
 }

projects/igniteui-angular/src/lib/grids/grid-base.directive.ts

@@ -177,7 +177,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
      * @hidden @internal
      */
     public get scrollSize() {
-        return this.verticalScrollContainer.getScrollbarWidth();
+        return this.verticalScrollContainer.getScrollNativeSize();
     }
 
     private _resourceStrings = CurrentResourceStrings.GridResStrings;