javascript - 如何隐藏滚动外的提升缩放？

Question

我正在使用提升缩放，这样每当它悬停在图像上时，它就会向我们显示图像一部分的缩放部分。在我的项目中，图像位于卷轴内。当在滚动之外应用提升缩放时，它也会被投影。所以我的问题是如何隐藏它。这是我面临的问题的示例小提琴。

问题演示

JSfiddle

HTML

<h1>Image Constrain ElevateZoom</h1>
<div class="scroll">
<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"/>
</div>

CSS

#zoom_01 {
  width: 400px;
  }
  .scroll {
    width:200px;
    height:200px;
    overflow: scroll;
  }

Javascript

 $("#zoom_01").elevateZoom({ zoomType: "lens", containLensZoom: true, gallery:'gallery_01', cursor: 'pointer', galleryActiveClass: "active"}); 

Answer 1

您必须设置图像的宽度，例如：img id="zoom_01" style="width:200px" ... 并设置适当的 Scroll Div 宽度，例如 div style="width:400px"class="scroll"..