Skip to content

Commit afeb811

Browse files
ChronosSF3phaserkaraivanov
authored
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]>
1 parent d42fcd6 commit afeb811

File tree

2 files changed

+35
-0
lines changed

2 files changed

+35
-0
lines changed

CHANGELOG.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ All notable changes for each version of this project will be documented in this
2323
<igx-column field="Age"></igx-column>
2424
</igx-grid>
2525
```
26+
- Scrolling with the mouse wheel over cells with templates that include scrollable containers now correctly scroll these inner containers before the grid body scrolls.
2627

2728
## 13.0.5
2829

projects/igniteui-angular/src/lib/directives/scroll-inertia/scroll_inertia.directive.ts

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -138,6 +138,10 @@ export class IgxScrollInertiaDirective implements OnInit, OnDestroy {
138138
scrollDeltaY = this.calcAxisCoords(deltaScaledY, -1, 1);
139139
}
140140

141+
if (evt.composedPath && this.didChildScroll(evt, scrollDeltaX, scrollDeltaY)) {
142+
return;
143+
}
144+
141145
if (scrollDeltaX && this.IgxScrollInertiaDirection === 'horizontal') {
142146
const nextLeft = this._startX + scrollDeltaX * scrollStep;
143147
if (!smoothing) {
@@ -186,6 +190,36 @@ export class IgxScrollInertiaDirective implements OnInit, OnDestroy {
186190
}
187191
}
188192

193+
/**
194+
* @hidden
195+
* Checks if the wheel event would have scrolled an element under the display container
196+
* in DOM tree so that it can correctly be ignored until that element can no longer be scrolled.
197+
*/
198+
protected didChildScroll(evt, scrollDeltaX, scrollDeltaY): boolean {
199+
const path = evt.composedPath();
200+
let i = 0;
201+
while (i < path.length && path[i].localName !== 'igx-display-container') {
202+
const e = path[i++];
203+
if (e.scrollHeight > e.clientHeight) {
204+
if (scrollDeltaY > 0 && e.scrollHeight - Math.abs(Math.round(e.scrollTop)) !== e.clientHeight) {
205+
return true;
206+
}
207+
if (scrollDeltaY < 0 && e.scrollTop !== 0) {
208+
return true;
209+
}
210+
}
211+
if (e.scrollWidth > e.clientWidth) {
212+
if (scrollDeltaX > 0 && e.scrollWidth - Math.abs(Math.round(e.scrollLeft)) !== e.clientWidth) {
213+
return true;
214+
}
215+
if (scrollDeltaX < 0 && e.scrollLeft !== 0) {
216+
return true;
217+
}
218+
}
219+
}
220+
return false;
221+
}
222+
189223
/**
190224
* @hidden
191225
* Function that is called the first moment we start interacting with the content on a touch device

0 commit comments

Comments
 (0)