fix(virtualization): Use virtual scroll top which takes virtual heig… (#7316)

* fix(virtualization):  Use virtual scroll top which takes virtual height to actual height ration when recalculating vertical offset.

* chore(*): Recalc virtual height before use.

* chore(*): Fix test timing as it has elements with different height,

* chore(*): Rename method and use only if browser height is exeeded.

* chore(*): Fix lint.

Co-authored-by: MKirova <MKirova@DEV-MKIROVA>
Co-authored-by: Stamen Stoychev <[email protected]>
Co-authored-by: Konstantin Dinev <[email protected]>

Author: 4 people

projects/igniteui-angular/src/lib/combo/combo.component.spec.ts

@@ -750,7 +750,8 @@ describe('igxCombo', () => {
                 scrollIndex += 10;
                 if (scrollIndex < combo.data.length) {
                     combo.virtualScrollContainer.scrollTo(scrollIndex);
-                    combo.virtualScrollContainer.onChunkLoad.pipe(take(1)).subscribe(() => {
+                    combo.virtualScrollContainer.onChunkLoad.pipe(take(1)).subscribe(async() => {
+                        await wait(30);
                         checkGroupedItemsClass();
                     });
                 } else {

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

@@ -734,13 +734,8 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
         if (!parseInt(this.scrollComponent.nativeElement.style.height, 10)) {
             return;
         }
-
-        const containerSize = parseInt(this.igxForContainerSize, 10);
-        const maxRealScrollTop = event.target.children[0].scrollHeight - containerSize;
-        const realPercentScrolled = maxRealScrollTop !== 0 ?  event.target.scrollTop / maxRealScrollTop : 0;
         if (!this._bScrollInternal) {
-            const maxVirtScrollTop = this._virtHeight - containerSize;
-            this._virtScrollTop = realPercentScrolled * maxVirtScrollTop;
+            this._calcVirtualScrollTop(event.target.scrollTop);
         } else {
             this._bScrollInternal = false;
         }
@@ -1340,11 +1335,25 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
     }
     private _updateVScrollOffset() {
         let scrollOffset = 0;
+        let currentScrollTop = this.scrollPosition;
+        if (this._virtHeightRatio !== 1) {
+            this._calcVirtualScrollTop(this.scrollPosition);
+            currentScrollTop = this._virtScrollTop;
+        }
         const vScroll =  this.scrollComponent.nativeElement;
         scrollOffset = vScroll && this.scrollComponent.size ?
-            this.scrollPosition - this.sizesCache[this.state.startIndex] : 0;
+        currentScrollTop - this.sizesCache[this.state.startIndex] : 0;
         this.dc.instance._viewContainer.element.nativeElement.style.top = -(scrollOffset) + 'px';
     }
+
+    protected _calcVirtualScrollTop(scrollTop: number) {
+        const containerSize = parseInt(this.igxForContainerSize, 10);
+        const maxRealScrollTop = this.scrollComponent.size - containerSize;
+        const realPercentScrolled = maxRealScrollTop !== 0 ?  scrollTop / maxRealScrollTop : 0;
+        const maxVirtScrollTop = this._virtHeight - containerSize;
+        this._virtScrollTop = realPercentScrolled * maxVirtScrollTop;
+    }
+
     private _updateHScrollOffset() {
         let scrollOffset = 0;
         scrollOffset =  this.scrollComponent.nativeElement &&
@@ -1615,13 +1624,8 @@ export class IgxGridForOfDirective<T> extends IgxForOfDirective<T> implements On
         if (!parseInt(this.scrollComponent.nativeElement.style.height, 10)) {
             return;
         }
-
-        const containerSize = parseInt(this.igxForContainerSize, 10);
-        const maxRealScrollTop = event.target.children[0].scrollHeight - containerSize;
-        const realPercentScrolled = maxRealScrollTop !== 0 ?  event.target.scrollTop / maxRealScrollTop : 0;
         if (!this._bScrollInternal) {
-            const maxVirtScrollTop = this._virtHeight - containerSize;
-            this._virtScrollTop = realPercentScrolled * maxVirtScrollTop;
+            this._calcVirtualScrollTop(event.target.scrollTop);
         } else {
             this._bScrollInternal = false;
         }