1

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>
Improve this question
3
  • 1
    Quite a lot of code here. A minimal minimal reproducible example would be very welcome IMO. Also, what do you see in your browser devtools that could indicate a malfunction in terms of scrolling/overflow? Commented Jan 4 at 23:13
  • it seems in general i cannot disable scrolling. tested with a test component (updated the code above). i dont see any indications in the devtools to why it wouldnt work Commented Jan 4 at 23:42
  • 1
    when lightbox is open, open the browser dev tools, and inspect your DOM, click on html tag and edit its css, and add overflow: hidden; if the scroll still is being rendered, go to the next tag, body, and add it overflow: hidden; too, keep doing this until you find the tag that adding the overflow. Sometimes this happens with me too, and i do this method to find where the scroll is. Commented Jan 5 at 19:45
Related questions
6167
How to disable text selection highlighting
3348
How do I disable the resizable property of a textarea?
3267
How do you disable browser autocomplete on web form field / input tags?
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.