fix(module:table): fix table scrollbar bug (#3801)

close #3796

components/core/services/public-api.ts

@@ -6,8 +6,6 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-export * from './nz-measure-scrollbar.service';
-export * from './nz-measure-scrollbar.service.module';
 export * from './update-host-class.service';
 export * from './nz-copy-to-clipboard.service';
 export * from './nz-copy-to-clipboard.service.module';

components/core/util/measure-scrollbar.ts

@@ -0,0 +1,54 @@
+/**
+ * @license
+ * Copyright Alibaba.com All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
+ */
+
+export function measureScrollbar(direction: 'vertical' | 'horizontal' = 'vertical', prefix: string = 'ant'): number {
+  let scrollbarVerticalSize;
+  let scrollbarHorizontalSize;
+
+  // Measure scrollbar width for padding body during modal show/hide
+  const scrollbarMeasure = {
+    position: 'absolute',
+    top: '-9999px',
+    width: '50px',
+    height: '50px'
+  };
+  if (typeof document === 'undefined' || typeof window === 'undefined') {
+    return 0;
+  }
+  const isVertical = direction === 'vertical';
+  if (isVertical && scrollbarVerticalSize) {
+    return scrollbarVerticalSize;
+  } else if (!isVertical && scrollbarHorizontalSize) {
+    return scrollbarHorizontalSize;
+  }
+  const scrollDiv = document.createElement('div');
+  Object.keys(scrollbarMeasure).forEach(scrollProp => {
+    // @ts-ignore
+    scrollDiv.style[scrollProp] = scrollbarMeasure[scrollProp];
+  });
+  // apply hide scrollbar className ahead
+  scrollDiv.className = `${prefix}-hide-scrollbar scroll-div-append-to-body`;
+  // Append related overflow style
+  if (isVertical) {
+    scrollDiv.style.overflowY = 'scroll';
+  } else {
+    scrollDiv.style.overflowX = 'scroll';
+  }
+  document.body.appendChild(scrollDiv);
+  let size = 0;
+  if (isVertical) {
+    size = scrollDiv.offsetWidth - scrollDiv.clientWidth;
+    scrollbarVerticalSize = size;
+  } else {
+    size = scrollDiv.offsetHeight - scrollDiv.clientHeight;
+    scrollbarHorizontalSize = size;
+  }
+
+  document.body.removeChild(scrollDiv);
+  return size;
+}

components/core/util/public-api.ts

@@ -20,3 +20,4 @@ export * from './throttleByAnimationFrame';
 export * from './time';
 export * from './style-checke';
 export * from './text-measure';
+export * from './measure-scrollbar';

components/modal/nz-modal.spec.ts

@@ -9,7 +9,7 @@ import { BrowserDynamicTestingModule } from '@angular/platform-browser-dynamic/t
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
 import { NzButtonComponent, NzButtonModule } from 'ng-zorro-antd/button';
-import { dispatchFakeEvent, dispatchKeyboardEvent, NzMeasureScrollbarService } from 'ng-zorro-antd/core';
+import { dispatchFakeEvent, dispatchKeyboardEvent } from 'ng-zorro-antd/core';
 import { NzI18nService } from 'ng-zorro-antd/i18n';
 import { NzIconTestModule } from 'ng-zorro-antd/icon/testing';
 import en_US from '../i18n/languages/en_US';
@@ -33,8 +33,7 @@ describe('modal testing (legacy)', () => {
     beforeEach(async(() => {
       TestBed.configureTestingModule({
         imports: [NoopAnimationsModule, NzButtonModule, NzModalModule],
-        declarations: [NzDemoModalAsyncComponent],
-        providers: [NzMeasureScrollbarService]
+        declarations: [NzDemoModalAsyncComponent]
       }).compileComponents();
     }));
 
@@ -73,8 +72,7 @@ describe('modal testing (legacy)', () => {
     beforeEach(async(() => {
       TestBed.configureTestingModule({
         imports: [NoopAnimationsModule, NzButtonModule, NzModalModule],
-        declarations: [NzDemoModalConfirmPromiseComponent],
-        providers: [NzMeasureScrollbarService]
+        declarations: [NzDemoModalConfirmPromiseComponent]
       }).compileComponents();
     }));
 
@@ -123,8 +121,7 @@ describe('modal testing (legacy)', () => {
     beforeEach(async(() => {
       TestBed.configureTestingModule({
         imports: [NoopAnimationsModule, NzModalModule, NzIconTestModule],
-        declarations: [TestBasicServiceComponent],
-        providers: [NzMeasureScrollbarService]
+        declarations: [TestBasicServiceComponent]
       }).compileComponents();
     }));
 
@@ -226,8 +223,7 @@ describe('modal testing (legacy)', () => {
     beforeEach(async(() => {
       TestBed.configureTestingModule({
         imports: [NoopAnimationsModule, NzModalModule],
-        declarations: [TestVaryServiceComponent, TestVaryServiceCustomComponent],
-        providers: [NzMeasureScrollbarService]
+        declarations: [TestVaryServiceComponent, TestVaryServiceCustomComponent]
       });
       TestBed.overrideModule(BrowserDynamicTestingModule, {
         set: { entryComponents: [TestVaryServiceCustomComponent] }
@@ -278,8 +274,7 @@ describe('modal testing (legacy)', () => {
     beforeEach(async(() => {
       TestBed.configureTestingModule({
         imports: [NoopAnimationsModule, NzModalModule],
-        declarations: [TestConfirmModalComponent, TestConfirmCustomComponent],
-        providers: [NzMeasureScrollbarService]
+        declarations: [TestConfirmModalComponent, TestConfirmCustomComponent]
       }).compileComponents();
 
       TestBed.overrideModule(BrowserDynamicTestingModule, {
@@ -374,8 +369,7 @@ describe('modal testing (legacy)', () => {
 
     const injector = TestBed.configureTestingModule({
       imports: [NoopAnimationsModule, NzButtonModule, NzModalModule],
-      declarations: [NzDemoModalAsyncComponent],
-      providers: [NzMeasureScrollbarService]
+      declarations: [NzDemoModalAsyncComponent]
     });
     fixture = TestBed.createComponent(NzDemoModalAsyncComponent);
     const comp = fixture.componentInstance as NzDemoModalAsyncComponent;
@@ -448,7 +442,6 @@ describe('NzModal', () => {
   beforeEach(fakeAsync(() => {
     TestBed.configureTestingModule({
       imports: [NoopAnimationsModule, NzModalModule],
-      providers: [NzMeasureScrollbarService],
       declarations: [NzDemoModalBasicComponent, NzDemoModalMaskComponent, ModalByServiceComponent]
     });
 

components/table/nz-table.component.ts

@@ -35,7 +35,7 @@ import {
 import { fromEvent, merge, EMPTY, Subject } from 'rxjs';
 import { flatMap, startWith, takeUntil } from 'rxjs/operators';
 
-import { InputBoolean, InputNumber, NzMeasureScrollbarService, NzSizeMDSType } from 'ng-zorro-antd/core';
+import { measureScrollbar, InputBoolean, InputNumber, NzSizeMDSType } from 'ng-zorro-antd/core';
 import { NzI18nService } from 'ng-zorro-antd/i18n';
 
 import { NzThComponent } from './nz-th.component';
@@ -196,13 +196,19 @@ export class NzTableComponent<T = any> implements OnInit, AfterViewInit, OnDestr
   }
 
   fitScrollBar(): void {
-    const scrollbarWidth = this.nzMeasureScrollbarService.scrollBarWidth;
-    if (scrollbarWidth) {
-      this.headerBottomStyle = {
-        marginBottom: `-${scrollbarWidth}px`,
-        paddingBottom: `0px`
-      };
-      this.cdr.markForCheck();
+    if (this.nzScroll.y) {
+      const scrollbarWidth = measureScrollbar('vertical');
+      const scrollbarWidthOfHeader = measureScrollbar('horizontal', 'ant-table');
+      // Add negative margin bottom for scroll bar overflow bug
+      if (scrollbarWidthOfHeader > 0) {
+        this.headerBottomStyle = {
+          marginBottom: `-${scrollbarWidthOfHeader}px`,
+          paddingBottom: '0px',
+          overflowX: 'scroll',
+          overflowY: `${scrollbarWidth === 0 ? 'hidden' : 'scroll'}`
+        };
+        this.cdr.markForCheck();
+      }
     }
   }
 
@@ -228,7 +234,6 @@ export class NzTableComponent<T = any> implements OnInit, AfterViewInit, OnDestr
     private renderer: Renderer2,
     private ngZone: NgZone,
     private cdr: ChangeDetectorRef,
-    private nzMeasureScrollbarService: NzMeasureScrollbarService,
     private i18n: NzI18nService,
     private platform: Platform,
     elementRef: ElementRef

components/table/nz-table.module.ts

@@ -12,7 +12,7 @@ import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 
 import { NzCheckboxModule } from 'ng-zorro-antd/checkbox';
-import { NzAddOnModule, NzMeasureScrollbarServiceModule } from 'ng-zorro-antd/core';
+import { NzAddOnModule } from 'ng-zorro-antd/core';
 import { NzDropDownModule } from 'ng-zorro-antd/dropdown';
 import { NzEmptyModule } from 'ng-zorro-antd/empty';
 import { NzI18nModule } from 'ng-zorro-antd/i18n';
@@ -50,7 +50,6 @@ import { NzVirtualScrollDirective } from './nz-virtual-scroll.directive';
     NzVirtualScrollDirective
   ],
   imports: [
-    NzMeasureScrollbarServiceModule,
     NzMenuModule,
     FormsModule,
     NzAddOnModule,

components/table/nz-tbody.spec.ts

@@ -1,16 +1,14 @@
 import { Component, DebugElement } from '@angular/core';
 import { fakeAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import { NzMeasureScrollbarService } from 'ng-zorro-antd/core';
 import { NzTableModule } from './nz-table.module';
 import { NzTbodyDirective } from './nz-tbody.directive';
 
 describe('nz-tbody', () => {
   beforeEach(fakeAsync(() => {
     TestBed.configureTestingModule({
       imports: [NzTableModule],
-      declarations: [NzTbodyTestTableComponent, NzTbodyTestNzTableComponent],
-      providers: [NzMeasureScrollbarService]
+      declarations: [NzTbodyTestTableComponent, NzTbodyTestNzTableComponent]
     });
     TestBed.compileComponents();
   }));

components/table/nz-thead.spec.ts

@@ -1,7 +1,6 @@
 import { Component, DebugElement } from '@angular/core';
 import { fakeAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import { NzMeasureScrollbarService } from 'ng-zorro-antd/core';
 import { NzIconTestModule } from 'ng-zorro-antd/icon/testing';
 import { NzTableComponent } from './nz-table.component';
 import { NzTableModule } from './nz-table.module';
@@ -10,8 +9,7 @@ describe('nz-thead', () => {
   beforeEach(fakeAsync(() => {
     TestBed.configureTestingModule({
       imports: [NzTableModule, NzIconTestModule],
-      declarations: [NzTheadTestNzTableComponent],
-      providers: [NzMeasureScrollbarService]
+      declarations: [NzTheadTestNzTableComponent]
     });
     TestBed.compileComponents();
   }));

components/table/nz-tr.spec.ts

@@ -1,16 +1,14 @@
 import { Component, DebugElement } from '@angular/core';
 import { fakeAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import { NzMeasureScrollbarService } from 'ng-zorro-antd/core';
 import { NzTableModule } from './nz-table.module';
 import { NzTrDirective } from './nz-tr.directive';
 
 describe('nz-tr', () => {
   beforeEach(fakeAsync(() => {
     TestBed.configureTestingModule({
       imports: [NzTableModule],
-      declarations: [NzTrTestTableComponent, NzTrTestNzTableComponent],
-      providers: [NzMeasureScrollbarService]
+      declarations: [NzTrTestTableComponent, NzTrTestNzTableComponent]
     });
     TestBed.compileComponents();
   }));

package.json

@@ -30,7 +30,7 @@
     "date-fns": "^1.30.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "0.800.3",
+    "@angular-devkit/build-angular": "^0.800.3",
     "@angular-devkit/build-ng-packagr": "^0.800.1",
     "@angular-devkit/core": "^8.0.1",
     "@angular-devkit/schematics": "^8.0.1",