fix(overlay): backdrop blocking element scroll

Fixes a long-standing where the backdrop doesn't allow the user to scroll, if the main scrollable container is not the body.

Fixes #6927.

Author: crisbeto

src/cdk/overlay/overlay-ref.ts

@@ -12,7 +12,11 @@ import {OverlayConfig} from './overlay-config';
 import {OverlayKeyboardDispatcher} from './keyboard/overlay-keyboard-dispatcher';
 import {Observable} from 'rxjs/Observable';
 import {Subject} from 'rxjs/Subject';
+import {fromEvent} from 'rxjs/observable/fromEvent';
 import {first} from 'rxjs/operators/first';
+import {debounceTime} from 'rxjs/operators/debounceTime';
+import {tap} from 'rxjs/operators/tap';
+import {BlockScrollStrategy} from './scroll/index';
 
 
 /**
@@ -256,6 +260,19 @@ export class OverlayRef implements PortalOutlet {
     // action desired when such a click occurs (usually closing the overlay).
     this._backdropElement.addEventListener('click', () => this._backdropClick.next(null));
 
+    if (!(this._config.scrollStrategy instanceof BlockScrollStrategy)) {
+      // When the user starts scrolling by mouse, disable pointer events on the backdrop. This
+      // allows for non-body scroll containers (e.g. a sidenav container), which would normally
+      // be blocked due to the backdrop, to scroll. When the user has stopped scrolling for 100ms
+      // restore the pointer events in order for the click handler to work.
+      this._ngZone.runOutsideAngular(() => {
+        fromEvent(this._backdropElement!, 'wheel').pipe(
+          tap(() => this._backdropElement!.style.pointerEvents = 'none'),
+          debounceTime(100)
+        ).subscribe(() => this._backdropElement!.style.pointerEvents = '');
+      });
+    }
+
     // Add class to fade-in the backdrop after one frame.
     requestAnimationFrame(() => {
       if (this._backdropElement) {

src/cdk/overlay/overlay.spec.ts

@@ -1,5 +1,6 @@
 import {async, fakeAsync, tick, ComponentFixture, inject, TestBed} from '@angular/core/testing';
 import {Component, NgModule, ViewChild, ViewContainerRef} from '@angular/core';
+import {dispatchFakeEvent} from '@angular/cdk/testing';
 import {
   ComponentPortal,
   PortalModule,
@@ -429,6 +430,40 @@ describe('Overlay', () => {
         .toBeLessThan(children.indexOf(pane), 'Expected backdrop to be before the pane in the DOM');
     });
 
+    it('should disable pointer events on the backdrop when scrolling', fakeAsync(() => {
+      let overlayRef = overlay.create(config);
+      overlayRef.attach(componentPortal);
+
+      viewContainerFixture.detectChanges();
+      let backdrop = overlayContainerElement.querySelector('.cdk-overlay-backdrop') as HTMLElement;
+
+      expect(backdrop.style.pointerEvents).toBeFalsy();
+
+      dispatchFakeEvent(backdrop, 'wheel');
+
+      expect(backdrop.style.pointerEvents).toBe('none');
+
+      tick(100);
+
+      expect(backdrop.style.pointerEvents).toBeFalsy();
+    }));
+
+    it('should not disable pointer events on the backdrop when scrolling is blocked', () => {
+      config.scrollStrategy = overlay.scrollStrategies.block();
+
+      let overlayRef = overlay.create(config);
+      overlayRef.attach(componentPortal);
+
+      viewContainerFixture.detectChanges();
+      let backdrop = overlayContainerElement.querySelector('.cdk-overlay-backdrop') as HTMLElement;
+
+      expect(backdrop.style.pointerEvents).toBeFalsy();
+
+      dispatchFakeEvent(backdrop, 'wheel');
+
+      expect(backdrop.style.pointerEvents).toBeFalsy();
+    });
+
   });
 
   describe('panelClass', () => {