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

@@ -11,7 +11,9 @@ import {PortalHost, Portal} from '@angular/cdk/portal';
 import {OverlayConfig} from './overlay-config';
 import {Observable} from 'rxjs/Observable';
 import {Subject} from 'rxjs/Subject';
-import {first} from 'rxjs/operator/first';
+import {fromEvent} from 'rxjs/observable/fromEvent';
+import {RxChain, debounceTime, first, doOperator} from '@angular/cdk/rxjs';
+import {BlockScrollStrategy} from './scroll/index';
 
 
 /**
@@ -230,6 +232,19 @@ export class OverlayRef implements PortalHost {
     // 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(() => {
+        RxChain.from(fromEvent(this._backdropElement!, 'wheel'))
+          .call(doOperator, () => this._backdropElement!.style.pointerEvents = 'none')
+          .call(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,
@@ -409,6 +410,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', () => {