[core - v2.2.9] : Update - Device driven background scroll control (#992)

* Refactor scroll handling to be device specific
* Refactor for cleanliness
* replace removeEventHandler and refactor
* Revert demo change
* Merge in new develop branch as base

Author: Adamj1232

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/core",
-  "version": "2.2.8",
+  "version": "2.2.9-alpha.1",
   "scripts": {
     "build": "rollup -c",
     "dev": "rollup -c -w",

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

@@ -16,30 +16,37 @@
 <script lang="ts">
   import { fade } from 'svelte/transition'
   import { onDestroy, onMount } from 'svelte'
+  import { getDevice } from '../../utils'
+
+  const device = getDevice()
 
   const body = document.body
-  onMount(() => {
-    window.addEventListener(
-      'scroll',
-      () => {
-        document.documentElement.style.setProperty(
-          '--scroll-y',
-          `${window.scrollY}px`
-        )
-      },
-      { passive: true }
+  const html = document.documentElement
+  const trackYScrollPosition = () => {
+    document.documentElement.style.setProperty(
+      '--scroll-y',
+      `${window.scrollY}px`
     )
-    const scrollY =
-      document.documentElement.style.getPropertyValue('--scroll-y')
-    body.style.position = 'fixed'
+  }
+
+  onMount(() => {
+    window.addEventListener('scroll', trackYScrollPosition, { passive: true })
+    const scrollY = html.style.getPropertyValue('--scroll-y')
+    device.type === 'mobile'
+      ? (html.style.position = 'fixed')
+      : (html.style.overflow = 'hidden')
+
     body.style.top = `-${scrollY}`
   })
 
   onDestroy(() => {
+    device.type === 'mobile'
+      ? (html.style.position = '')
+      : (html.style.overflow = 'auto')
     const scrollY = body.style.top
-    body.style.position = ''
     body.style.top = ''
     window.scrollTo(0, parseInt(scrollY || '0') * -1)
+    window.removeEventListener('scroll', trackYScrollPosition)
   })
   export let close: () => void
 </script>

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/react",
-  "version": "2.1.6",
+  "version": "2.1.7-alpha.1",
   "description": "Collection of React Hooks for web3-onboard",
   "module": "dist/index.js",
   "browser": "dist/index.js",
@@ -21,8 +21,8 @@
     "typescript": "^4.5.5"
   },
   "dependencies": {
-    "@web3-onboard/common": "^2.0.7",
-    "@web3-onboard/core": "^2.2.7"
+    "@web3-onboard/core": "^2.2.9-alpha.1",
+    "@web3-onboard/common": "^2.0.7"
   },
   "peerDependencies": {
     "react": "^17.0.2"