Disable scrolling. Overflow:hidden not working

i need help figuring out how to disable scrolling when vue easy lightbox is open. nothing ive tried works.

overflow: hidden doesnt work i have tried adding :scrollDisabled="true" . still no luck

i have asked chatgpt , it reccomended creating a watcher on the lightbox, that also didnt work.

Any help would be greatly appreciated

<template>
  <div class="container">
    <button @click="toggleScrollLock">
      {{ isScrollLocked ? 'Unlock Scroll' : 'Lock Scroll' }}
    </button>
    <p>Scroll down to test. When locked, the page shouldn’t scroll.</p>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const isScrollLocked = ref(false)
function toggleScrollLock() {
isScrollLocked.value = !isScrollLocked.value
if (isScrollLocked.value) {
document.body.style.overflow = 'hidden'
} else {
document.body.style.overflow = ''
}
}
</script>
<style scoped>
.container {
/* Make the page tall so we can easily see scroll locking. */
height: 2000px;
background-color: #fafafa;
padding: 20px;
font-family: sans-serif;
}
button {
margin: 20px;
padding: 10px 15px;
cursor: pointer;
}
</style>