title: Prevent Scrolling in VueJS
body: <p>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.</p>
  
  <p>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:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div class="SocialAlbumWidget"&gt;
      &lt;div v-if="isModalVisible &amp;&amp; media[activeIndex]"&gt;
        &lt;LightBox
          ...
        /&gt;
  </code></pre>
  
  <p>I currently have a "showModal ()" function in the "methods" section, so was thinking of passing that through another function.</p>
  
  <p>Methods:</p>
  
  <pre><code>mothods: {
  ...
  showModal () {
    this.isModalVisible = true
  },
  closeModal () {
    this.isModalVisible = false
  }
  </code></pre>
  
  <p>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.</p>