[core-v2.2.7, react-v2.1.6] : fix - Add methods to prevent scrolling of background when modal is open (#976)

* Add methods to prevent scrolling of background when modal is open

* Update react package version

* Update core version in demo

Author: Adamj1232

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/core",
-  "version": "2.2.6",
+  "version": "2.2.7",
   "scripts": {
     "build": "rollup -c",
     "dev": "rollup -c -w",

packages/core/src/views/shared/Modal.svelte

@@ -15,7 +15,32 @@
 
 <script lang="ts">
   import { fade } from 'svelte/transition'
+  import { onDestroy, onMount } from 'svelte'
 
+  const body = document.body
+  onMount(() => {
+    window.addEventListener(
+      'scroll',
+      () => {
+        document.documentElement.style.setProperty(
+          '--scroll-y',
+          `${window.scrollY}px`
+        )
+      },
+      { passive: true }
+    )
+    const scrollY =
+      document.documentElement.style.getPropertyValue('--scroll-y')
+    body.style.position = 'fixed'
+    body.style.top = `-${scrollY}`
+  })
+
+  onDestroy(() => {
+    const scrollY = body.style.top
+    body.style.position = ''
+    body.style.top = ''
+    window.scrollTo(0, parseInt(scrollY || '0') * -1)
+  })
   export let close: () => void
 </script>
 
@@ -48,7 +73,7 @@
   .modal-overflow {
     overflow: hidden;
   }
-  
+
   .modal-styling {
     border-radius: var(--onboard-modal-border-radius, var(--border-radius-1));
     box-shadow: var(--onboard-modal-box-shadow, var(--box-shadow-0));

packages/demo/package.json

@@ -22,7 +22,7 @@
     "webpack-dev-server": "4.7.4"
   },
   "dependencies": {
-    "@web3-onboard/core": "^2.2.3",
+    "@web3-onboard/core": "^2.2.7",
     "@web3-onboard/fortmatic": "^2.0.2",
     "@web3-onboard/gnosis": "^2.0.1",
     "@web3-onboard/injected-wallets": "^2.0.5",

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/react",
-  "version": "2.1.5",
+  "version": "2.1.6",
   "description": "Collection of React Hooks for web3-onboard",
   "module": "dist/index.js",
   "browser": "dist/index.js",
@@ -22,7 +22,7 @@
   },
   "dependencies": {
     "@web3-onboard/common": "^2.0.7",
-    "@web3-onboard/core": "^2.2.5"
+    "@web3-onboard/core": "^2.2.7"
   },
   "peerDependencies": {
     "react": "^17.0.2"