remove body-lock-scroll

Author: hunterliu1003

docs/content/en/properties.md

@@ -78,7 +78,7 @@ Default transition:
 - Type: `Boolean`
 - Default: `true`
 
-`vue-final-modal` use [body-lock-scroll](https://www.npmjs.com/package/body-scroll-lock) to disabled the scrolling of body while the modal is displayed.
+Disabled the scrolling of body while the modal is displayed.
 
 ## `hideOverlay`
 

lib/VueFinalModal.vue

@@ -43,7 +43,6 @@
       >
         <div
           ref="vfmContent"
-          body-scroll-lock-ignore
           class="vfm__content vfm--cursor-auto"
           :class="[contentClass, { 'vfm--prevent-auto': preventClick }]"
           @click.stop
@@ -56,7 +55,7 @@
 </template>
 
 <script>
-import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock'
+import { setStyle, removeStyle } from './dom.js'
 
 let modalStack = []
 
@@ -173,7 +172,6 @@ export default {
             .forEach((vm, index) => {
               if (vm.getAttachElement() === target) {
                 // if vm and this have the same attach element
-                enableBodyScroll(vm.$refs.vfmContent)
                 vm.modalStackIndex = index
                 vm.visibility.overlay = false
               }
@@ -186,8 +184,6 @@ export default {
         } else if (target !== false) {
           console.warn('Unable to locate target '.concat(this.attach))
         }
-      } else {
-        this.lockScroll && enableBodyScroll(this.$refs.vfmContent)
       }
     },
     close() {
@@ -203,7 +199,7 @@ export default {
         !$_vm.hideOverlay && ($_vm.visibility.overlay = true)
       } else {
         // If the closed modal is the last one
-        this.lockScroll && enableBodyScroll(this.$refs.vfmContent)
+        this.lockScroll && removeStyle(document.body, 'overflow')
       }
       this.startTransitionLeave()
     },
@@ -218,17 +214,8 @@ export default {
     handleLockScroll() {
       if (this.value) {
         this.lockScroll
-          ? disableBodyScroll(this.$refs.vfmContent, {
-              allowTouchMove: el => {
-                while (el && el !== document.body) {
-                  if (el.getAttribute('body-scroll-lock-ignore') !== null) {
-                    return true
-                  }
-                  el = el.parentElement
-                }
-              }
-            })
-          : enableBodyScroll(this.$refs.vfmContent)
+          ? setStyle(document.body, 'overflow', 'hidden')
+          : removeStyle(document.body, 'overflow')
       }
     },
     getAttachElement() {

lib/dom.js

@@ -0,0 +1,18 @@
+// Stolen from bootstrap vue
+
+// Determine if an element is an HTML element
+export const isElement = el => !!(el && el.nodeType === Node.ELEMENT_NODE)
+
+// Set an style property on an element
+export const setStyle = (el, prop, value) => {
+  if (prop && isElement(el)) {
+    el.style[prop] = value
+  }
+}
+
+// Remove an style property from an element
+export const removeStyle = (el, prop) => {
+  if (prop && isElement(el)) {
+    el.style[prop] = ''
+  }
+}

package.json

@@ -41,9 +41,6 @@
     "rollup-plugin-vue": "^5.1.9",
     "vue-template-compiler": "^2.6.11"
   },
-  "dependencies": {
-    "body-scroll-lock": "^3.0.3"
-  },
   "gitHooks": {
     "pre-commit": "lint-staged"
   },

yarn.lock

@@ -1949,11 +1949,6 @@ body-parser@1.19.0:
     raw-body "2.4.0"
     type-is "~1.6.17"
 
-body-scroll-lock@^3.0.3:
-  version "3.1.5"
-  resolved "https://registry.yarnpkg.com/body-scroll-lock/-/body-scroll-lock-3.1.5.tgz#c1392d9217ed2c3e237fee1e910f6cdd80b7aaec"
-  integrity sha512-Yi1Xaml0EvNA0OYWxXiYNqY24AfWkbA6w5vxE7GWxtKfzIbZM+Qw+aSmkgsbWzbHiy/RCSkUZBplVxTA+E4jJg==
-
 bonjour@^3.5.0:
   version "3.5.0"
   resolved "https://registry.yarnpkg.com/bonjour/-/bonjour-3.5.0.tgz#8e890a183d8ee9a2393b3844c691a42bcf7bc9f5"