Merge pull request #7238 from IgniteUI/mkirova/fix-container-scroll

fix(igxGrid): Fix issues when grid container is scrolled left as a re…

Author: ChronosSF

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

@@ -3054,7 +3054,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         this._zoneBegoneListeners();
 
         const vertScrDC = this.verticalScrollContainer.displayContainer;
-        vertScrDC.addEventListener('scroll', this.scrollHandler);
+        vertScrDC.addEventListener('scroll', this.preventContainerScroll);
 
         this._pinnedRowList.changes
         .pipe(takeUntil(this.destroy$))
@@ -3132,7 +3132,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
             this.verticalScrollContainer.getScroll().removeEventListener('scroll', this.verticalScrollHandler);
             this.headerContainer.getScroll().removeEventListener('scroll', this.horizontalScrollHandler);
             const vertScrDC = this.verticalScrollContainer.displayContainer;
-            vertScrDC.removeEventListener('scroll', this.scrollHandler);
+            vertScrDC.removeEventListener('scroll', this.preventContainerScroll);
         });
     }
 
@@ -5583,11 +5583,15 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
     /**
      * @hidden @internal
      */
-    public scrollHandler = (event) => {
-        this.headerContainer.scrollPosition += event.target.scrollLeft;
-        this.verticalScrollContainer.scrollPosition += event.target.scrollTop;
-        event.target.scrollLeft = 0;
-        event.target.scrollTop = 0;
+    public preventContainerScroll = (evt) => {
+        if (evt.target.scrollTop !== 0) {
+            this.verticalScrollContainer.addScrollTop(evt.target.scrollTop);
+            evt.target.scrollTop = 0;
+        }
+        if (evt.target.scrollLeft !== 0) {
+            this.headerContainer.scrollPosition += evt.target.scrollLeft;
+            evt.target.scrollLeft = 0;
+        }
     }
 
     /**

projects/igniteui-angular/src/lib/grids/grid/grid.component.ts

@@ -477,16 +477,6 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
         };
     }
 
-    /**
-     * @hidden @internal
-     */
-    public preventContainerScroll(evt) {
-        if (evt.target.scrollTop !== 0) {
-            this.verticalScrollContainer.addScrollTop(evt.target.scrollTop);
-            evt.target.scrollTop = 0;
-        }
-    }
-
     /**
      * @hidden @internal
      */

projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html

@@ -86,7 +86,7 @@
     <div class="igx-grid__tbody-content"  tabindex="0" (focus)="navigation.focusTbody($event)" [attr.aria-activedescendant]="activeDescendant"
      (keydown)="navigation.dispatchEvent($event)" (onDragStop)="selectionService.dragMode = $event"
         (onDragScroll)="dragScroll($event)" [igxGridDragSelect]="selectionService.dragMode" role="rowgroup"
-        [style.height.px]='totalHeight' [style.width.px]='calcWidth' #tbody (scroll)='scrollHandler($event)'>
+        [style.height.px]='totalHeight' [style.width.px]='calcWidth' #tbody (scroll)='preventContainerScroll($event)'>
         <span *ngIf="hasMovableColumns && draggedColumn && pinnedColumns.length <= 0"
             [igxColumnMovingDrop]="headerContainer" [attr.droppable]="true" id="left"
             class="igx-grid__scroll-on-drag-left"></span>

projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html

@@ -67,7 +67,7 @@
 <div igxGridBody (keydown.control.c)="copyHandlerIE()" (copy)="copyHandler($event)" class="igx-grid__tbody">
     <div class="igx-grid__tbody-content"  tabindex="0" (focus)="navigation.focusTbody($event)" [attr.aria-activedescendant]="activeDescendant" (keydown)="navigation.dispatchEvent($event)" role="rowgroup" (onDragStop)="selectionService.dragMode = $event"
         (onDragScroll)="dragScroll($event)" [igxGridDragSelect]="selectionService.dragMode"
-        [style.height.px]='totalHeight' [style.width.px]='calcWidth' #tbody (scroll)='scrollHandler($event)'>
+        [style.height.px]='totalHeight' [style.width.px]='calcWidth' #tbody (scroll)='preventContainerScroll($event)'>
         <span *ngIf="hasMovableColumns && draggedColumn && pinnedColumns.length <= 0"
             [igxColumnMovingDrop]="headerContainer" [attr.droppable]="true" id="left"
             class="igx-grid__scroll-on-drag-left"></span>