title: stop scrolling on body when modal is open and allow scroll on modal divs
body: <p>When I open a modal I can scroll down to the body of the page but I can't scroll down the modal to see all the data (only the background site is scrolling), any idea how to stop scrolling on the background body but allow scrolling on the modal itself?</p>
  
  <p>this is my css:</p>
  
  <pre><code>.modal-mask {
      position: fixed;
      z-index: 9998;
      top: 0;
      left: 0;
      width: 100%;
      height: 10000px;
      background-color: /* rgba(0, 0, 0, .5); */rgba(43, 46, 56, 0.9);
      transition: opacity .3s ease;
  
  }
  
  
  .modal-container {
      box-sizing: border-box;
      width: 75%;
      z-index: 10000;
      /* max-height: 650px; */
      overflow: auto;
      margin: 0px auto 0;
      padding: 20px 30px;
      background-color: #fff;
      border-radius: 2px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
      transition: all .3s ease;
      font-family: Helvetica, Arial, sans-serif;
      -webkit-overflow-scrolling: touch;
  
  }
  </code></pre>
  
  <p>modal html:</p>
  
  <pre><code>&lt;div class="modal-mask" @click="$emit('close')" v-show="show" transition="modal"&gt;
          &lt;div @click.stop class="modal-container"&gt;
  
              &lt;button @click="$emit('close')"&gt;&lt;i class="fa fa-chevron-left" aria-hidden="true"&gt;&lt;/i&gt;
              &lt;/button&gt;
              &lt;div class="modal-header"&gt;
                  &lt;h2&gt;Title&lt;/h2&gt;
              &lt;/div&gt;
  
              &lt;div class="modal-body"&gt;
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
              &lt;/div&gt;
  
              &lt;div class="modal-footer text-right"&gt;
                  &lt;!-- &lt;button class="modal-default-button"&gt;
                      Close
                  &lt;/button&gt; --&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>I tried adding overflow:hidden to the body when the modal is opened and it does cancel the scrolling on the body but still doesn't give me scrolling on the modal </p>