title: How to hide elevate zoom outside scroll?
body: <p>I'm using elevate zoom so that whenever it is hovered over a image it show us a zoomed portion of a part of image. In my project the image is inside a scroll. When applying elevate zoom outside the scroll also its being projected. so my question is how to hide it. Here is a sample fiddle of the problem am facing.</p>
  
  <p><strong>Problem Demo</strong></p>
  
  <p><a href="https://jsfiddle.net/tabsheerabdulla/jd181oz9/1/" rel="nofollow noreferrer">JSfiddle</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;h1&gt;Image Constrain ElevateZoom&lt;/h1&gt;
  &lt;div class="scroll"&gt;
  &lt;img id="zoom_01" src='https://www.guthriegreen.com/sites/default/files/Kung-Fu-Panda-6%5B1%5D.jpg' data-zoom-image="https://www.guthriegreen.com/sites/default/files/Kung-Fu-Panda-6%5B1%5D.jpg"/&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Css</strong></p>
  
  <pre><code>#zoom_01 {
    width: 400px;
    }
    .scroll {
      width:200px;
      height:200px;
      overflow: scroll;
    }
  </code></pre>
  
  <p><strong>Javascript</strong></p>
  
  <pre><code> $("#zoom_01").elevateZoom({ zoomType: "lens", containLensZoom: true, gallery:'gallery_01', cursor: 'pointer', galleryActiveClass: "active"}); 
  </code></pre>