fix(cdk): fix scroll blocker for custom withScroll mode (#1364)

Closes #1158, Closes #1259
akveo · Apr 10, 2019 · 34193cc · 34193cc
1 parent 788a6d4
commit 34193cc
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 0 deletions.
diff --git a/src/framework/theme/components/cdk/overlay/_overlay.theme.scss b/src/framework/theme/components/cdk/overlay/_overlay.theme.scss
@@ -9,3 +9,14 @@
     z-index: 1040;
   }
 }
+
+/**
+ * In case when Nebular Layout custom scroll `withScroll` mode is enabled
+ * we need to disable default CDK scroll blocker (@link NbBlockScrollStrategyAdapter) on HTML element
+ * so that it won't add additional positioning.
+ */
+.nb-global-scrollblock {
+  position: static;
+  width: auto;
+  overflow: hidden;
+}
diff --git a/src/framework/theme/components/layout/layout.component.ts b/src/framework/theme/components/layout/layout.component.ts
@@ -443,7 +443,21 @@ export class NbLayoutComponent implements AfterViewInit, OnDestroy {
         filter(() => this.withScrollValue),
       )
       .subscribe((scrollable: boolean) => {
+        const root = this.document.documentElement;
+        const scrollBlockClass = 'nb-global-scrollblock';
+
         this.overlayScrollBlock = !scrollable;
+
+        /**
+         * In case when Nebular Layout custom scroll `withScroll` mode is enabled
+         * we need to disable default CDK scroll blocker (@link NbBlockScrollStrategyAdapter) on HTML element
+         * so that it won't add additional positioning.
+         */
+        if (!scrollable) {
+          this.renderer.addClass(root, scrollBlockClass);
+        } else {
+          this.renderer.removeClass(root, scrollBlockClass);
+        }
       });
 
     if (isPlatformBrowser(this.platformId)) {