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 2636233d5e5..7768478f26c 100644
--- a/packages/core/useScrollLock/index.ts
+++ b/packages/core/useScrollLock/index.ts
@@ -4,8 +4,30 @@ 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') {
+    return true
+  }
+  else {
+    const parent = ele.parentNode as Element
+
+    if (!parent || parent.tagName === 'BODY')
+      return false
+
+    return checkOverflowScroll(parent)
+  }
+}
+
 function preventDefault(rawEvent: TouchEvent): boolean {
   const e = rawEvent || window.event
+
+  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).
   if (e.touches.length > 1)
     return true
@@ -49,7 +71,7 @@ export function useScrollLock(
       stopTouchMoveListener = useEventListener(
         ele,
         'touchmove',
-        preventDefault,
+        (e) => { preventDefault(e as TouchEvent) },
         { passive: false },
       )
     }