html - Disable scrolling. Overflow:hidden not working - Stack Overflow

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>