feat(useScrollLock): check for in TouchListener

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">

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 },
       )
     }