javascript - 移动设备上的图像拖动故障

Question

我构建了一个快速 block ，允许某人放大图像然后拖动(平移和缩放)。

为此，我使用了全景缩放:

jQuery(document).ready(function( $ ) {

  $("#panzoom").panzoom({
    $zoomRange: $(".zoom-range"),
    $reset: $(".reset"),
    contain: 'invert',
  });

});

.wrap{
  position: relative;
  background: black;
  padding: 60px 20px;
  height: 600px;
}
.wrap .padding, section{
  height: 100%;
}

.wrap .buttons {
  position: absolute;
  z-index:1;
  top: 0;
  right:0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.panzoom/2.0.6/jquery.panzoom.min.js"></script>

<div class="wrap">
  
  <div class="padding">
  
    <section>
      <div id="panzoom" style="text-align: center">
          <img src="https://i.imgur.com/KhWo66L.png" width="100%">
      </div>
    </section>

    <section class="buttons">
      <button class="reset">Reset</button>
      <input type="range" class="zoom-range">
    </section>
    
  </div>
  
</div>

以上在桌面上运行良好。但在移动设备上，由于用户使用屏幕进行滚动，因此在尝试拖动图像时，它会“卡顿”。

难以解释，最好在实际设备上进行演示。

关于这里的问题有什么想法吗？

Answer 1

使用这个 library相反，它更稳定

// just grab a DOM element
const element = document.querySelector('.wrap');

// And pass it to panzoom
panzoom(element);

.wrap{
  position: relative;
  background: black;
  padding: 60px 20px;
  height: 600px;
}
.wrap .padding, section{
  height: 100%;
}

.wrap .buttons {
  position: absolute;
  z-index:1;
  top: 0;
  right:0;
}

<script src='https://unpkg.com/panzoom@8.7.3/dist/panzoom.min.js'></script>

<div class="wrap">
  
  <div class="padding">
  
    <section>
      <div id="panzoom" style="text-align: center">
          <img src="https://i.imgur.com/KhWo66L.png" width="100%">
      </div>
    </section>

    <section class="buttons">
      <button class="reset">Reset</button>
      <input type="range" class="zoom-range">
    </section>
    
  </div>
  
</div>