fix(block-scroll-strategy): server-side rendering error (#9665)

Fixes a server-side rendering error in the `BlockScrollStrategy`, because it was referring to the global `document`.

Relates to #9066.

Author: crisbeto

src/cdk/overlay/scroll/block-scroll-strategy.ts

@@ -16,16 +16,19 @@ export class BlockScrollStrategy implements ScrollStrategy {
   private _previousHTMLStyles = { top: '', left: '' };
   private _previousScrollPosition: { top: number, left: number };
   private _isEnabled = false;
+  private _document: Document;
 
-  constructor(private _viewportRuler: ViewportRuler) { }
+  constructor(private _viewportRuler: ViewportRuler, document: any) {
+    this._document = document;
+  }
 
   /** Attaches this scroll strategy to an overlay. */
   attach() { }
 
   /** Blocks page-level scroll while the attached overlay is open. */
   enable() {
     if (this._canBeEnabled()) {
-      const root = document.documentElement;
+      const root = this._document.documentElement;
 
       this._previousScrollPosition = this._viewportRuler.getViewportScrollPosition();
 
@@ -45,8 +48,8 @@ export class BlockScrollStrategy implements ScrollStrategy {
   /** Unblocks page-level scroll while the attached overlay is open. */
   disable() {
     if (this._isEnabled) {
-      const html = document.documentElement;
-      const body = document.body;
+      const html = this._document.documentElement;
+      const body = this._document.body;
       const previousHtmlScrollBehavior = html.style['scrollBehavior'] || '';
       const previousBodyScrollBehavior = body.style['scrollBehavior'] || '';
 
@@ -71,11 +74,13 @@ export class BlockScrollStrategy implements ScrollStrategy {
     // Since the scroll strategies can't be singletons, we have to use a global CSS class
     // (`cdk-global-scrollblock`) to make sure that we don't try to disable global
     // scrolling multiple times.
-    if (document.documentElement.classList.contains('cdk-global-scrollblock') || this._isEnabled) {
+    const html = this._document.documentElement;
+
+    if (html.classList.contains('cdk-global-scrollblock') || this._isEnabled) {
       return false;
     }
 
-    const body = document.body;
+    const body = this._document.body;
     const viewport = this._viewportRuler.getViewportSize();
     return body.scrollHeight > viewport.height || body.scrollWidth > viewport.width;
   }

src/cdk/overlay/scroll/scroll-strategy-options.ts

@@ -5,12 +5,13 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-import {Injectable, NgZone} from '@angular/core';
+import {Injectable, NgZone, Inject} from '@angular/core';
 import {CloseScrollStrategy, CloseScrollStrategyConfig} from './close-scroll-strategy';
 import {NoopScrollStrategy} from './noop-scroll-strategy';
 import {BlockScrollStrategy} from './block-scroll-strategy';
 import {ScrollDispatcher} from '@angular/cdk/scrolling';
 import {ViewportRuler} from '@angular/cdk/scrolling';
+import {DOCUMENT} from '@angular/common';
 import {
   RepositionScrollStrategy,
   RepositionScrollStrategyConfig,
@@ -25,10 +26,15 @@ import {
  */
 @Injectable()
 export class ScrollStrategyOptions {
+  private _document: Document;
+
   constructor(
     private _scrollDispatcher: ScrollDispatcher,
     private _viewportRuler: ViewportRuler,
-    private _ngZone: NgZone) { }
+    private _ngZone: NgZone,
+    @Inject(DOCUMENT) document: any) {
+      this._document = document;
+    }
 
   /** Do nothing on scroll. */
   noop = () => new NoopScrollStrategy();
@@ -41,7 +47,7 @@ export class ScrollStrategyOptions {
       this._ngZone, this._viewportRuler, config)
 
   /** Block scrolling. */
-  block = () => new BlockScrollStrategy(this._viewportRuler);
+  block = () => new BlockScrollStrategy(this._viewportRuler, this._document);
 
   /**
    * Update the overlay's position on scroll.