Merge pull request #7318 from IgniteUI/mkirova/fix-9.0.x-7234

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

Author: kdinev

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

@@ -732,7 +732,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

@@ -731,13 +731,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;
         }
@@ -1306,11 +1301,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 &&
@@ -1581,13 +1590,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;
         }