title: (Vue.js) Scrolling in the modal will also scroll the back of the modal
body: <p>Clicking on the image brings up a long, scrolling modal. The problem is that if you scrolling in the modal will also scroll the back of the modal. How do you solve it?</p>
  
  <p>Modal is a component. Here is my code:</p>
  
  <p><strong>Carousel.vue</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;div&gt;
      &lt;div v-for="(item, index) in photos" :key="index"&gt;
        &lt;div @click="imgClick(item)" style="cursor:pointer;"&gt;
          &lt;img :src="item.thumbnail" /&gt;
        &lt;/div&gt;
        &lt;Modal v-if='item.show' @close="item.show = false"&gt;
          &lt;div slot='body'&gt;
            &lt;img :src="item.thumbnail" :class="`img-index--${index}`"/&gt;
          &lt;/div&gt;        
        &lt;/Modal&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import Modal from './Modal.vue'
  export default {
    props: {
      items: { type: Array, default: () =&gt; [] }
    },
    data() {
      return {
        photos: {}
      }
    },
    created() {
      this.photos = this.items.map(item =&gt; {
        return { ...item, show: false }
      })
    },
    methods: {
      imgClick(item) {
        item.show = true
      }
    },
    components: {
      Modal: Modal
    }
  }
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>