fix(scroll): allow inner elements to scroll during inertia wheel #10749…

… - master (#10793) * fix(scroll): allow inner elements to scroll during inertia wheel #10749 Co-authored-by: Pepo <[email protected]> Co-authored-by: Radoslav Karaivanov <[email protected]>
IgniteUI · Jan 17, 2022 · afeb811 · afeb811
1 parent d42fcd6
commit afeb811
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 0 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -23,6 +23,7 @@ All notable changes for each version of this project will be documented in this
         <igx-column field="Age"></igx-column>
     </igx-grid>
    ```
+   - Scrolling with the mouse wheel over cells with templates that include scrollable containers now correctly scroll these inner containers before the grid body scrolls.
 
 ## 13.0.5
 

diff --git a/projects/igniteui-angular/src/lib/directives/scroll-inertia/scroll_inertia.directive.ts b/projects/igniteui-angular/src/lib/directives/scroll-inertia/scroll_inertia.directive.ts
@@ -138,6 +138,10 @@ export class IgxScrollInertiaDirective implements OnInit, OnDestroy {
             scrollDeltaY = this.calcAxisCoords(deltaScaledY, -1, 1);
         }
 
+        if (evt.composedPath && this.didChildScroll(evt, scrollDeltaX, scrollDeltaY)) {
+            return;
+        }
+
         if (scrollDeltaX && this.IgxScrollInertiaDirection === 'horizontal') {
             const nextLeft = this._startX + scrollDeltaX * scrollStep;
             if (!smoothing) {
@@ -186,6 +190,36 @@ export class IgxScrollInertiaDirective implements OnInit, OnDestroy {
         }
     }
 
+    /**
+     * @hidden
+     * Checks if the wheel event would have scrolled an element under the display container
+     * in DOM tree so that it can correctly be ignored until that element can no longer be scrolled.
+     */
+    protected didChildScroll(evt, scrollDeltaX, scrollDeltaY): boolean {
+        const path = evt.composedPath();
+        let i = 0;
+        while (i < path.length && path[i].localName !== 'igx-display-container') {
+            const e = path[i++];
+            if (e.scrollHeight > e.clientHeight) {
+                if (scrollDeltaY > 0 && e.scrollHeight - Math.abs(Math.round(e.scrollTop)) !== e.clientHeight) {
+                    return true;
+                }
+                if (scrollDeltaY < 0 && e.scrollTop !== 0) {
+                    return true;
+                }
+            }
+            if (e.scrollWidth > e.clientWidth) {
+                if (scrollDeltaX > 0 && e.scrollWidth - Math.abs(Math.round(e.scrollLeft)) !== e.clientWidth) {
+                    return true;
+                }
+                if (scrollDeltaX < 0 && e.scrollLeft !== 0) {
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+
     /**
      * @hidden
      * Function that is called the first moment we start interacting with the content on a touch device