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

@@ -10,14 +10,23 @@ import {Direction, Directionality} from '@angular/cdk/bidi';
 import {ComponentPortal, Portal, PortalOutlet, TemplatePortal} from '@angular/cdk/portal';
 import {ComponentRef, EmbeddedViewRef, NgZone} from '@angular/core';
 import {Location} from '@angular/common';
-import {Observable, Subject, merge, SubscriptionLike, Subscription, Observer} from 'rxjs';
-import {take, takeUntil} from 'rxjs/operators';
+import {
+  Observable,
+  Subject,
+  merge,
+  SubscriptionLike,
+  Subscription,
+  Observer,
+  fromEvent,
+} from 'rxjs';
+import {take, takeUntil, tap, debounceTime} from 'rxjs/operators';
 import {OverlayKeyboardDispatcher} from './keyboard/overlay-keyboard-dispatcher';
 import {OverlayConfig} from './overlay-config';
 import {coerceCssPixelValue, coerceArray} from '@angular/cdk/coercion';
 import {OverlayReference} from './overlay-reference';
 import {PositionStrategy} from './position/position-strategy';
 import {ScrollStrategy} from './scroll';
+import {BlockScrollStrategy} from './scroll/block-scroll-strategy';
 
 
 /** An object where all of its properties cannot be written. */
@@ -393,6 +402,19 @@ export class OverlayRef implements PortalOutlet, OverlayReference {
     this._backdropElement.addEventListener('click',
         (event: MouseEvent) => this._backdropClick.next(event));
 
+    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.
     if (typeof requestAnimationFrame !== 'undefined') {
       this._ngZone.runOutsideAngular(() => {

src/cdk/overlay/overlay.spec.ts

@@ -745,6 +745,40 @@ describe('Overlay', () => {
         .toBeLessThan(children.indexOf(host), 'Expected backdrop to be before the host 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', () => {