From 0e7e58044d0409bfa99c7ae66153aeaccbcccaec Mon Sep 17 00:00:00 2001
From: Robin Scholz <r.scholz@kms-team.com>
Date: Tue, 25 Oct 2022 11:02:06 +0200
Subject: [PATCH 1/4] fix(useScrollLock): fix iOS touchmove bug

---
 packages/core/useScrollLock/index.ts | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/core/useScrollLock/index.ts b/packages/core/useScrollLock/index.ts
index 2636233d5e5..a4cbd1ff7ba 100644
--- a/packages/core/useScrollLock/index.ts
+++ b/packages/core/useScrollLock/index.ts
@@ -4,8 +4,13 @@ import { isIOS, resolveRef, resolveUnref, tryOnScopeDispose } from '@vueuse/shar
 
 import { useEventListener } from '../useEventListener'
 
-function preventDefault(rawEvent: TouchEvent): boolean {
+function preventDefault(rawEvent: TouchEvent, ele: Element): boolean {
   const e = rawEvent || window.event
+
+  // Do not prevent if the event is fired from a child (otherwise iOS implementation will not work)
+  if (ele !== e.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).
   if (e.touches.length > 1)
     return true
@@ -49,7 +54,7 @@ export function useScrollLock(
       stopTouchMoveListener = useEventListener(
         ele,
         'touchmove',
-        preventDefault,
+        (e) => { preventDefault(e as TouchEvent, ele) },
         { passive: false },
       )
     }

From 89be00aaadb8943f6814fe83898fea92ca034d8d Mon Sep 17 00:00:00 2001
From: webfansplz <308241863@qq.com>
Date: Wed, 26 Oct 2022 23:26:47 +0800
Subject: [PATCH 2/4] chore: update

---
 packages/core/useScrollLock/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/useScrollLock/index.ts b/packages/core/useScrollLock/index.ts
index a4cbd1ff7ba..ae07382b3e7 100644
--- a/packages/core/useScrollLock/index.ts
+++ b/packages/core/useScrollLock/index.ts
@@ -7,7 +7,7 @@ import { useEventListener } from '../useEventListener'
 function preventDefault(rawEvent: TouchEvent, ele: Element): boolean {
   const e = rawEvent || window.event
 
-  // Do not prevent if the event is fired from a child (otherwise iOS implementation will not work)
+  // Do not prevent if the event is fired from a child.
   if (ele !== e.target)
     return false
 

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 3/4] 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 },
       )
     }

From b4f82d7455a9ad4c717efdd8243596fc3c8af2a4 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Tue, 3 Jan 2023 14:16:21 +0100
Subject: [PATCH 4/4] chore: lint

---
 packages/core/useScrollLock/index.ts | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/packages/core/useScrollLock/index.ts b/packages/core/useScrollLock/index.ts
index a3ac8a5cba1..7768478f26c 100644
--- a/packages/core/useScrollLock/index.ts
+++ b/packages/core/useScrollLock/index.ts
@@ -5,19 +5,17 @@ import { isIOS, resolveRef, resolveUnref, tryOnScopeDispose } from '@vueuse/shar
 import { useEventListener } from '../useEventListener'
 
 function checkOverflowScroll(ele: Element): boolean {
-  const _style = window.getComputedStyle(ele)
-  if (_style.overflowX === 'scroll' || _style.overflowY === 'scroll') {
+  const style = window.getComputedStyle(ele)
+  if (style.overflowX === 'scroll' || style.overflowY === 'scroll') {
     return true
   }
   else {
-    const _parent = ele.parentNode as Element
+    const parent = ele.parentNode as Element
 
-    if (_parent.tagName === 'BODY')
+    if (!parent || parent.tagName === 'BODY')
       return false
 
-    if (checkOverflowScroll(_parent))
-      return true
-    else return false
+    return checkOverflowScroll(parent)
   }
 }