3 * Copyright Google Inc. All Rights Reserved.
5 * Use of this source code is governed by an MIT-style license that can be
6 * found in the LICENSE file at https://angular.io/license
8 /* tslint:disable:array-type member-access variable-name typedef
9 only-arrow-functions directive-class-suffix component-class-suffix
11 import {ViewportRuler} from '../position/viewport-ruler';
13 import {ScrollStrategy} from './scroll-strategy';
16 * Strategy that will prevent the user from scrolling while the overlay is
19 export class BlockScrollStrategy implements ScrollStrategy {
20 private _previousHTMLStyles = {top: '', left: ''};
21 private _previousScrollPosition: {top: number, left: number};
22 private _isEnabled = false;
24 constructor(private _viewportRuler: ViewportRuler) {}
31 if (this._canBeEnabled()) {
32 const root = document.documentElement;
34 this._previousScrollPosition =
35 this._viewportRuler.getViewportScrollPosition();
37 // Cache the previous inline styles in case the user had set them.
38 this._previousHTMLStyles.left = root.style.left || '';
39 this._previousHTMLStyles.top = root.style.top || '';
41 // Note: we're using the `html` node, instead of the `body`, because the
42 // `body` may have the user agent margin, whereas the `html` is guaranteed
44 root.style.left = `${- this._previousScrollPosition.left}px`;
45 root.style.top = `${- this._previousScrollPosition.top}px`;
46 root.classList.add('cdk-global-scrollblock');
47 this._isEnabled = true;
52 if (this._isEnabled) {
53 this._isEnabled = false;
54 document.documentElement.style.left = this._previousHTMLStyles.left;
55 document.documentElement.style.top = this._previousHTMLStyles.top;
56 document.documentElement.classList.remove('cdk-global-scrollblock');
58 this._previousScrollPosition.left, this._previousScrollPosition.top);
62 private _canBeEnabled(): boolean {
63 // Since the scroll strategies can't be singletons, we have to use a global
65 // (`cdk-global-scrollblock`) to make sure that we don't try to disable
66 // global scrolling multiple times.
67 if (document.documentElement.classList.contains('cdk-global-scrollblock') ||
72 const body = document.body;
73 const viewport = this._viewportRuler.getViewportRect();
74 return body.scrollHeight > viewport.height ||
75 body.scrollWidth > viewport.width;