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

Question

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

为此，我使用了平移缩放：

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

改用这个库，它更稳定

// 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>