diff --git a/components/core/overlay/scroll/nz-block-scroll-strategy.ts b/components/core/overlay/scroll/nz-block-scroll-strategy.ts new file mode 100644 index 00000000000..1659f6529e2 --- /dev/null +++ b/components/core/overlay/scroll/nz-block-scroll-strategy.ts @@ -0,0 +1,19 @@ +import { ScrollStrategy } from '@angular/cdk/overlay'; +import { Renderer2 } from '@angular/core'; + +export class NzBlockScrollStrategy implements ScrollStrategy { + + constructor(private document: Document, private renderer: Renderer2) { + } + + attach(): void {} + + enable(): void { + this.renderer.setStyle(document.body, 'overflow', 'hidden'); + } + + disable(): void { + this.renderer.removeStyle(document.body, 'overflow'); + } + +} diff --git a/components/core/overlay/scroll/nz-scroll-strategy-options.ts b/components/core/overlay/scroll/nz-scroll-strategy-options.ts new file mode 100644 index 00000000000..58fd61aa518 --- /dev/null +++ b/components/core/overlay/scroll/nz-scroll-strategy-options.ts @@ -0,0 +1,19 @@ +import { DOCUMENT } from '@angular/common'; +import { Inject, Injectable, Renderer2, RendererFactory2 } from '@angular/core'; +import { NzBlockScrollStrategy } from './nz-block-scroll-strategy'; + +@Injectable({providedIn: 'root'}) +export class NzScrollStrategyOptions { + private document: Document; + private renderer: Renderer2; + constructor( + rendererFactory: RendererFactory2, + // tslint:disable-next-line:no-any + @Inject(DOCUMENT) document: any + ) { + this.document = document; + this.renderer = rendererFactory.createRenderer(null, null); + } + + block = () => new NzBlockScrollStrategy(this.document, this.renderer); +} diff --git a/components/drawer/nz-drawer.component.ts b/components/drawer/nz-drawer.component.ts index d6a011d3963..b5f671b345b 100644 --- a/components/drawer/nz-drawer.component.ts +++ b/components/drawer/nz-drawer.component.ts @@ -14,6 +14,7 @@ import { import { CdkOverlayOrigin, Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay'; import { TemplatePortal } from '@angular/cdk/portal'; +import { NzScrollStrategyOptions } from '../core/overlay/scroll/nz-scroll-strategy-options'; import { InputBoolean } from '../core/util/convert'; @@ -77,6 +78,7 @@ export class NzDrawerComponent implements OnInit, OnDestroy { private renderer: Renderer2, private overlay: Overlay, private elementRef: ElementRef, + private nzScrollStrategyOptions: NzScrollStrategyOptions, private viewContainerRef: ViewContainerRef) { } @@ -109,13 +111,18 @@ export class NzDrawerComponent implements OnInit, OnDestroy { getOverlayConfig(): OverlayConfig { return new OverlayConfig({ - scrollStrategy: this.overlay.scrollStrategies.block() + scrollStrategy: this.nzScrollStrategyOptions.block() }); } updateOverlayStyle(): void { if (this.overlayRef && this.overlayRef.overlayElement) { this.renderer.setStyle(this.overlayRef.overlayElement, 'pointer-events', this.isOpen ? 'auto' : 'none'); + if (this.isOpen) { + this.overlayRef.getConfig().scrollStrategy.enable(); + } else { + this.overlayRef.getConfig().scrollStrategy.disable(); + } } } diff --git a/components/drawer/nz-drawer.spec.ts b/components/drawer/nz-drawer.spec.ts index 2ed589f5db6..6fbd2030dbf 100644 --- a/components/drawer/nz-drawer.spec.ts +++ b/components/drawer/nz-drawer.spec.ts @@ -61,6 +61,15 @@ describe('NzDrawerComponent', () => { expect(component.drawerComponent.nzVisible).toBe(false); }); + it('should set body overflow', () => { + component.open(); + fixture.detectChanges(); + expect(document.body.style.overflow).toBe('hidden'); + component.close(); + fixture.detectChanges(); + expect(document.body.style.overflow).toBe(''); + }); + it('should hied close button', () => { component.closable = false; component.open();