diff --git a/components/table/src/table/table-inner-scroll.component.ts b/components/table/src/table/table-inner-scroll.component.ts index ba1a5f0b5a1..aa3c4e5a0e8 100644 --- a/components/table/src/table/table-inner-scroll.component.ts +++ b/components/table/src/table/table-inner-scroll.component.ts @@ -24,7 +24,7 @@ import { import { NzResizeService } from 'ng-zorro-antd/core/services'; import { NzSafeAny } from 'ng-zorro-antd/core/types'; import { fromEvent, merge, Subject } from 'rxjs'; -import { delay, filter, startWith, takeUntil } from 'rxjs/operators'; +import { delay, filter, startWith, switchMap, takeUntil } from 'rxjs/operators'; import { NzTableData } from '../table.types'; @Component({ @@ -32,8 +32,8 @@ import { NzTableData } from '../table.types'; changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: ` -
-
+ +
@@ -68,6 +68,18 @@ import { NzTableData } from '../table.types'; +
+
+
+
+
`, host: { @@ -130,8 +142,8 @@ export class NzTableInnerScrollComponent implements OnChanges, AfterViewInit, On overflowY: this.scrollY && hasVerticalScrollBar ? 'scroll' : 'hidden' }; this.bodyStyleMap = { - overflowY: this.scrollY ? 'scroll' : null, - overflowX: this.scrollX ? 'scroll' : null, + overflowY: this.scrollY ? 'scroll' : 'hidden', + overflowX: this.scrollX ? 'auto' : null, maxHeight: this.scrollY }; this.scroll$.next(); @@ -143,14 +155,19 @@ export class NzTableInnerScrollComponent implements OnChanges, AfterViewInit, On ngAfterViewInit(): void { if (this.platform.isBrowser) { this.ngZone.runOutsideAngular(() => { - const scrollEvent$ = fromEvent(this.tableBodyElement.nativeElement, 'scroll').pipe(takeUntil(this.destroy$)); - const scrollX$ = scrollEvent$.pipe(filter(() => !!this.scrollX)); - const scrollY$ = scrollEvent$.pipe(filter(() => !!this.scrollY)); + const scrollEvent$ = this.scroll$.pipe( + startWith(null), + delay(0), + switchMap(() => fromEvent(this.tableBodyElement.nativeElement, 'scroll').pipe(startWith(true))), + takeUntil(this.destroy$) + ); const resize$ = this.resizeService.subscribe().pipe(takeUntil(this.destroy$)); const data$ = this.data$.pipe(takeUntil(this.destroy$)); - const setClassName$ = merge(scrollX$, resize$, data$, this.scroll$).pipe(startWith(true), delay(0)); + const setClassName$ = merge(scrollEvent$, resize$, data$, this.scroll$).pipe(startWith(true), delay(0), takeUntil(this.destroy$)); setClassName$.subscribe(() => this.setScrollPositionClassName()); - scrollY$.subscribe(() => (this.tableHeaderElement.nativeElement.scrollLeft = this.tableBodyElement.nativeElement.scrollLeft)); + scrollEvent$ + .pipe(filter(() => !!this.scrollY)) + .subscribe(() => (this.tableHeaderElement.nativeElement.scrollLeft = this.tableBodyElement.nativeElement.scrollLeft)); }); } }