Merge pull request #247 from blocknative/enhancement/fixed-scroll-modal

Make modal fixed and lock scrolling.

Closes #246

Author: lnbc1QWFyb24

src/components/Modal.svelte

@@ -15,7 +15,7 @@
     font-family: 'Helvetica Neue';
     justify-content: center;
     align-items: center;
-    position: absolute;
+    position: fixed;
     font-size: 16px;
     z-index: 99;
     top: 0;

src/views/WalletCheck.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { get } from 'svelte/store'
-
+  import { onDestroy, onMount } from 'svelte'
   import { fade } from 'svelte/transition'
   import BigNumber from 'bignumber.js'
 
@@ -54,6 +54,23 @@
     renderModule()
   }
 
+  function lockScroll() {
+    window.scrollTo(0, 0)
+  }
+
+  let originalOverflowValue
+
+  onMount(() => {
+    originalOverflowValue = window.document.body.style.overflow
+    window.document.body.style.overflow = 'hidden'
+    window.addEventListener('scroll', lockScroll)
+  })
+
+  onDestroy(() => {
+    window.removeEventListener('scroll', lockScroll)
+    window.document.body.style.overflow = originalOverflowValue
+  })
+
   async function renderModule() {
     checkingModule = true
 

src/views/WalletSelect.svelte

@@ -2,6 +2,7 @@
   import BigNumber from 'bignumber.js'
   import { get } from 'svelte/store'
   import { fade } from 'svelte/transition'
+  import { onDestroy, onMount } from 'svelte'
 
   import { app, walletInterface, wallet, resetWalletState } from '../stores'
 
@@ -56,6 +57,23 @@
   let showingAllWalletModules = false
   const showAllWallets = () => (showingAllWalletModules = true)
 
+  function lockScroll() {
+    window.scrollTo(0, 0)
+  }
+
+  let originalOverflowValue
+
+  onMount(() => {
+    originalOverflowValue = window.document.body.style.overflow
+    window.document.body.style.overflow = 'hidden'
+    window.addEventListener('scroll', lockScroll)
+  })
+
+  onDestroy(() => {
+    window.removeEventListener('scroll', lockScroll)
+    window.document.body.style.overflow = originalOverflowValue
+  })
+
   renderWalletSelect()
 
   async function renderWalletSelect() {