Scroll fix

codex-team · Apr 6, 2022 · 82deae5 · 82deae5
1 parent 085da8e
commit 82deae5
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 1 deletion.
diff --git a/src/components/modules/ui.ts b/src/components/modules/ui.ts
@@ -269,6 +269,14 @@ export default class UI extends Module<UINodes> {
     this.isMobile = window.innerWidth < 650;
   }
 
+  /**
+   * Updates --vh variable value, which allows to calculate actual 100vh value for mobile browsers
+   */
+  private setAppHeightFraction(): void {
+    const doc = document.documentElement
+    doc.style.setProperty('--vh', (window.innerHeight * 0.01) + 'px');
+  }
+
   /**
    * Makes Editor.js interface
    */
@@ -437,6 +445,11 @@ export default class UI extends Module<UINodes> {
      * Detect mobile version
      */
     this.checkIsMobile();
+
+    /**
+     * Updates stored window height fraction
+     */
+    this.setAppHeightFraction();
   }
 
   /**

diff --git a/src/styles/ui.css b/src/styles/ui.css
@@ -129,7 +129,8 @@
 }
 
 .ce-scroll-locked, .ce-scroll-locked > body {
-  height: 100vh;
+  height: 100vh; /* Fallback for browsers that do not support Custom Properties */
+  height: calc(var(--vh) * 100);
   overflow: hidden;
   /**
    * Mobile Safari fix