From bc7f77daa2c57a678ef352d47dbb5e87ab693217 Mon Sep 17 00:00:00 2001
From: robinscholz <dev@studioscholz.info>
Date: Thu, 27 Oct 2022 16:27:01 +0200
Subject: [PATCH] feat(useScrollLock): check for  in TouchListener

---
 packages/core/useScrollLock/demo.vue |  2 +-
 packages/core/useScrollLock/index.ts | 27 +++++++++++++++++++++++----
 2 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/packages/core/useScrollLock/demo.vue b/packages/core/useScrollLock/demo.vue
index 3846ed8dec6..a8fe8c14e83 100644
--- a/packages/core/useScrollLock/demo.vue
+++ b/packages/core/useScrollLock/demo.vue
@@ -10,7 +10,7 @@ const toggleLock = useToggle(isLocked)
 </script>
 
 <template>
-  <div class="flex flex-wrap">
+  <div class="flex flex-wrap gap-4">
     <div ref="el" class="w-300px h-300px m-auto overflow-scroll bg-gray-500/5 rounded">
       <div class="w-500px h-400px relative">
         <div position="absolute left-0 top-0" bg="gray-500/5" p="x-2 y-1">
diff --git a/packages/core/useScrollLock/index.ts b/packages/core/useScrollLock/index.ts
index ae07382b3e7..a3ac8a5cba1 100644
--- a/packages/core/useScrollLock/index.ts
+++ b/packages/core/useScrollLock/index.ts
@@ -4,11 +4,30 @@ import { isIOS, resolveRef, resolveUnref, tryOnScopeDispose } from '@vueuse/shar
 
 import { useEventListener } from '../useEventListener'
 
-function preventDefault(rawEvent: TouchEvent, ele: Element): boolean {
+function checkOverflowScroll(ele: Element): boolean {
+  const _style = window.getComputedStyle(ele)
+  if (_style.overflowX === 'scroll' || _style.overflowY === 'scroll') {
+    return true
+  }
+  else {
+    const _parent = ele.parentNode as Element
+
+    if (_parent.tagName === 'BODY')
+      return false
+
+    if (checkOverflowScroll(_parent))
+      return true
+    else return false
+  }
+}
+
+function preventDefault(rawEvent: TouchEvent): boolean {
   const e = rawEvent || window.event
 
-  // Do not prevent if the event is fired from a child.
-  if (ele !== e.target)
+  const _target = e.target as Element
+
+  // Do not prevent if element or parentNodes have overflow: scroll set.
+  if (checkOverflowScroll(_target))
     return false
 
   // Do not prevent if the event has more than one touch (usually meaning this is a multi touch gesture like pinch to zoom).
@@ -54,7 +73,7 @@ export function useScrollLock(
       stopTouchMoveListener = useEventListener(
         ele,
         'touchmove',
-        (e) => { preventDefault(e as TouchEvent, ele) },
+        (e) => { preventDefault(e as TouchEvent) },
         { passive: false },
       )
     }