feat: replace body-scroll-lock by own implementation

Author: MichaelGitArt

package.json

@@ -15,11 +15,7 @@
     "url": "https://github.com/MichaelGitArt/gitart-vue-dialog.git"
   },
   "license": "MIT",
-  "dependencies": {
-    "body-scroll-lock": "^4.0.0-beta.0"
-  },
   "devDependencies": {
-    "@types/body-scroll-lock": "^2.6.2",
     "@types/node": "^16.3.1",
     "@typescript-eslint/eslint-plugin": "^4.28.4",
     "@typescript-eslint/parser": "^4.28.4",

src/components/GDialog.vue

@@ -2,6 +2,7 @@
   <template v-if="activatedOnce">
     <Teleport to="body">
       <GDialogOverlay
+        ref="overlay"
         :active="isActive"
         :deactivating="deactivating"
         :active-z-index="activeZIndex"
@@ -11,7 +12,7 @@
       <Transition name="dialog-transition">
         <div
           v-show="isActive"
-          ref="frame"
+          ref="contentFrame"
           :class="classes"
           :style="styles"
         >
@@ -32,13 +33,12 @@
 
 <script lang="ts">
 import {
-  defineComponent, computed, ref, watch,
+  defineComponent, computed, ref, watch, onBeforeUnmount,
 } from 'vue'
 
 import { useStackable } from '../composable/stackable'
 import { useLazyActivation } from '../composable/lazyActivation'
-
-import { disableScroll, enableScroll } from '../helper/scroll.helper'
+import { useScroll } from '../composable/scroll'
 
 import GDialogOverlay from './GDialogOverlay.vue'
 import GDialogContent from './GDialogContent.vue'
@@ -120,6 +120,11 @@ export default defineComponent({
   emits: ['update:modelValue'],
 
   setup(props, { emit }) {
+    const contentFrame = ref<Element>()
+    const overlay = ref<InstanceType<typeof GDialogOverlay>>()
+
+    const overlayElement = computed<Element | undefined>(() => overlay.value?.$el as Element)
+
     const onClickOutside = () => {
       if (!props.persistent) {
         emit('update:modelValue', false)
@@ -130,12 +135,11 @@ export default defineComponent({
       computed(() => props.modelValue),
     )
 
-    const frame = ref(null)
     const { activeZIndex } = useStackable({
       activeElSelector: '.q-dialog-frame--active',
       stackMinZIndex: 200,
       isActive,
-      content: frame,
+      content: contentFrame,
     })
 
     const classes = computed(() => [
@@ -149,14 +153,23 @@ export default defineComponent({
       zIndex: activeZIndex.value,
     }))
 
+    const { enableScroll, disableScroll } = useScroll({
+      overlay: overlayElement,
+      content: contentFrame,
+    })
+
     watch(isActive, (active) => {
       if(active) {
-        disableScroll(props.hideScrollbar)
+        disableScroll()
       } else {
         enableScroll()
       }
     })
 
+    onBeforeUnmount(() => {
+      enableScroll()
+    })
+
     return {
       onClickOutside,
       activatedOnce,
@@ -165,7 +178,8 @@ export default defineComponent({
       deactivating,
       classes,
       styles,
-      frame,
+      contentFrame,
+      overlay,
     }
   },
 })

src/composable/scroll.ts

@@ -0,0 +1,49 @@
+import { Ref } from 'vue'
+
+import { noScrollableParent } from '../helper/scroll.helper'
+
+type ScrollParams = {
+  overlay: Ref<Element | undefined>
+  content: Ref<Element | undefined>
+}
+
+export const useScroll = ({
+  overlay,
+  content,
+}: ScrollParams) => {
+  let disabled = false
+
+  const eventListener = (event: WheelEvent) => {
+    if(event.target === overlay.value
+    || event.target === document.body
+    || noScrollableParent(event, content.value)
+    ) {
+      event.preventDefault()
+    }
+  }
+
+  const disableScroll = () => {
+    if(disabled) {
+      return
+    }
+
+    window.addEventListener('wheel', eventListener, {
+      passive: false,
+    })
+    disabled = true
+  }
+
+  const enableScroll = () => {
+    if(!disabled) {
+      return
+    }
+
+    window.removeEventListener('wheel', eventListener)
+    disabled = false
+  }
+
+  return {
+    disableScroll,
+    enableScroll,
+  }
+}

src/composable/stackable.ts

@@ -9,7 +9,7 @@ interface IUseStackableParams {
   activeElSelector: string
   stackMinZIndex: number
   isActive: Ref<boolean>
-  content: Ref<Element | null>
+  content: Ref<Element | undefined>
 }
 
 export const useStackable: (param: IUseStackableParams) => {activeZIndex: ComputedRef<number>} = ({

src/helper/scroll.helper.ts

@@ -1,32 +1,57 @@
-import { enableBodyScroll, disableBodyScroll } from 'body-scroll-lock'
+/**
+ * A copy of the vuetify implemantation
+ * https://github.com/vuetifyjs/vuetify/blob/v2.5.8/packages/vuetify/src/mixins/overlayable/index.ts
+ */
 
-export const getScrollbarWidth = () => {
-  const container = document.createElement('div')
-  container.style.visibility = 'hidden'
-  container.style.overflow = 'scroll'
-  const inner = document.createElement('div')
+/**
+ * Polyfill for Event.prototype.composedPath
+ */
+const composedPath = (e: WheelEvent): EventTarget[] => {
+  if (e.composedPath) return e.composedPath()
 
-  container.appendChild(inner)
-  document.body.appendChild(container)
-  const scrollbarWidth = container.offsetWidth - inner.offsetWidth
-  document.body.removeChild(container)
+  const path = []
+  let el = e.target as Element
 
-  return scrollbarWidth
-}
+  while (el) {
+    path.push(el)
+
+    if (el.tagName === 'HTML') {
+      path.push(document)
+      path.push(window)
 
-export const disableScroll = (hideScrollbar = false) => {
-  if (hideScrollbar) {
-    disableBodyScroll(document.body)
-  } else {
-    const scrollWidth = getScrollbarWidth()
-    disableBodyScroll(document.body)
-    if (scrollWidth > 0) {
-      document.body.style.paddingRight = scrollWidth + 'px'
+      return path
     }
+
+    el = el.parentElement!
   }
+  return path
 }
 
-export const enableScroll = () => {
-  enableBodyScroll(document.body)
-  document.body.style.paddingRight = '0'
+const hasScrollbar = (el?: Element) => {
+  if (!el || el.nodeType !== Node.ELEMENT_NODE) return false
+
+  const style = window.getComputedStyle(el)
+  return ['auto', 'scroll'].includes(style.overflowY!) && el.scrollHeight > el.clientHeight
+}
+
+const shouldScroll = (el: Element, delta: number) => {
+  if (el.scrollTop === 0 && delta < 0) return true
+  return el.scrollTop + el.clientHeight === el.scrollHeight && delta > 0
+}
+
+export const noScrollableParent = (event: WheelEvent, content: Element | undefined) => {
+  const path = composedPath(event)
+  const delta = event.deltaY
+
+  for (let index = 0; index < path.length; index++) {
+    const el = path[index]
+
+    if (el === document) return true
+    if (el === document.documentElement) return true
+    if (el === content) return true
+
+    if (hasScrollbar(el as Element)) return shouldScroll(el as Element, delta)
+  }
+
+  return true
 }

yarn.lock

@@ -292,11 +292,6 @@
     remark "^13.0.0"
     unist-util-find-all-after "^3.0.2"
 
-"@types/body-scroll-lock@^2.6.2":
-  version "2.6.2"
-  resolved "https://registry.yarnpkg.com/@types/body-scroll-lock/-/body-scroll-lock-2.6.2.tgz#ce56d17e1bf8383c08a074733c4e9e536a59ae61"
-  integrity sha512-PhoQPbwPYspXqf7lkwtF7aJzAwL88t+9E/e0b2X84tlHpU8ZuS9UNnLtkT0XhyZJYHpET5qRfIdZ0HBIxuc7HQ==
-
 "@types/estree@^0.0.48":
   version "0.0.48"
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.48.tgz#18dc8091b285df90db2f25aa7d906cfc394b7f74"
@@ -761,11 +756,6 @@ bluebird@^3.7.2:
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
   integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==
 
-body-scroll-lock@^4.0.0-beta.0:
-  version "4.0.0-beta.0"
-  resolved "https://registry.yarnpkg.com/body-scroll-lock/-/body-scroll-lock-4.0.0-beta.0.tgz#4f78789d10e6388115c0460cd6d7d4dd2bbc4f7e"
-  integrity sha512-a7tP5+0Mw3YlUJcGAKUqIBkYYGlYxk2fnCasq/FUph1hadxlTRjF+gAcZksxANnaMnALjxEddmSi/H3OR8ugcQ==
-
 brace-expansion@^1.1.7:
   version "1.1.11"
   resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"