Prevent Scrolling in VueJS

Question

I am trying to prevent scrolling only when the lightbox component is open, but cannot seem to do so. I hope to not use any outside libraries or plug-ins to do this.

My App.vue contains the "LightBox" component, so I am assuming the prevent scrolling function should live in the App.vue as well. App.vue snippet:

<template>
  <div class="SocialAlbumWidget">
    <div v-if="isModalVisible && media[activeIndex]">
      <LightBox
        ...
      />

I currently have a "showModal ()" function in the "methods" section, so was thinking of passing that through another function.

Methods:

mothods: {
...
showModal () {
  this.isModalVisible = true
},
closeModal () {
  this.isModalVisible = false
}

I expect the body to have scroll when the"Lightbox" component is closed and disabled when the "Lightbox" component is open. Thanks! Let me know what other code would be useful.

@Charlie I just updated it as you can see. In the meanwhile, I will look through the pen you just commented. — Angello L.
– Angello L., Commented Jun 24, 2019 at 15:11

Bruno Francisco · Accepted Answer · 2019-06-24 15:17:57Z

20

You could use a watcher to react to changes in isModalVisible and disable the scrolling function by using style="overflow: hidden".

Something along these lines:

// HTML
<btn @click="dialog = !dialog" >Click Me </btn>

// JS
new Vue({
  el: '#app',
  data () {
    return {
      dialog: false,
    }
  },
  watch: {
    isModalVisible: function() {
      if(this.isModalVisible){
        document.documentElement.style.overflow = 'hidden'
        return
      }

      document.documentElement.style.overflow = 'auto'
    }
  }
})

answered Jun 24, 2019 at 15:17

Bruno Francisco

4,2426 gold badges37 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Angello L. Over a year ago

Syntax Error: SyntaxError: /Users/angello.lazar/Desktop/sdc-social-album-widget/src/App.vue: Unexpected token, expected "," (128:35) 126 | }, 127 | watch: { > 128 | isModalVisible: preventScroll(){

Angello L. Over a year ago

That makes sense - thanks. But, not sure why I am receiving this error...

Angello L. Over a year ago

Figured it out! Thanks for the help!

user9978368 Over a year ago

thats not work on ios devices. U need fixed content and wach page scroll posotion, then add negative position top to your fixed wrap. after, when scroll turn on, u need scrollTop() on js to prev position.

Ranjeet Eppakayala · Accepted Answer · 2022-11-28 18:26:19Z

18

Prevent scrolling events on LightBox modal itself -

<LightBox
 @wheel.prevent
 @touchmove.prevent
 @scroll.prevent
/>

style overflow: hidden might create some concerns.

such as;

Visibility of scrollbar
UI bounce w.e.f overflow toggle

edited Nov 28, 2022 at 18:26

answered Jun 18, 2021 at 7:49

Ranjeet Eppakayala

3,0881 gold badge13 silver badges23 bronze badges

3 Comments

Hosein Over a year ago

@touchmove.prevent worked for me in mobile. I liked it

mattmess1221 Over a year ago

This doesn't seem to prevent dragging the scroll bars.

Ranjeet Eppakayala Over a year ago

@killjoy does the Modal has background overlay?

Collectives™ on Stack Overflow

Prevent Scrolling in VueJS

2 Answers 2

4 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related