feat(module:table): fix scroll bar displays always even unnecessary

close NG-ZORRO#5405
vthinkxie · Sep 16, 2020 · 874b6b1 · 874b6b1
1 parent bb8677c
commit 874b6b1
Showing 1 changed file with 28 additions and 11 deletions.
diff --git a/components/table/src/table/table-inner-scroll.component.ts b/components/table/src/table/table-inner-scroll.component.ts
@@ -24,16 +24,16 @@ 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({
   selector: 'nz-table-inner-scroll',
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   template: `
-    <div class="ant-table-content">
-      <div *ngIf="scrollY" #tableHeaderElement [ngStyle]="headerStyleMap" class="ant-table-header nz-table-hide-scrollbar">
+    <ng-container *ngIf="scrollY">
+      <div #tableHeaderElement [ngStyle]="headerStyleMap" class="ant-table-header nz-table-hide-scrollbar">
         <table
           nz-table-content
           tableLayout="fixed"
@@ -48,7 +48,7 @@ import { NzTableData } from '../table.types';
           [scrollX]="scrollX"
           tableLayout="fixed"
           [listOfColWidth]="listOfColWidth"
-          [theadTemplate]="scrollY ? null : theadTemplate"
+          [theadTemplate]="null"
           [contentTemplate]="contentTemplate"
         ></table>
       </div>
@@ -68,6 +68,18 @@ import { NzTableData } from '../table.types';
           </tbody>
         </table>
       </cdk-virtual-scroll-viewport>
+    </ng-container>
+    <div class="ant-table-content" *ngIf="!scrollY">
+      <div #tableBodyElement class="ant-table-body" [ngStyle]="bodyStyleMap">
+        <table
+          nz-table-content
+          [scrollX]="scrollX"
+          tableLayout="fixed"
+          [listOfColWidth]="listOfColWidth"
+          [theadTemplate]="theadTemplate"
+          [contentTemplate]="contentTemplate"
+        ></table>
+      </div>
     </div>
   `,
   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<MouseEvent>(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<MouseEvent>(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));
       });
     }
   }