移动设备上的图像拖拽故障

Question

我已经构建了一个快速块，允许用户在图像上放大，然后拖动(平移和缩放)。

为此，我使用了panzoom：

​

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>

​