jquery - 中央から開始して、マウスを使用して大きな画像をパンします

Question

ここの回答に掲載されているコードを使用して、マウスダウンを使用して大きな画像をパンし、透明な別の画像の下の div に配置しています。ズームする必要はありません。パンが大きな画像の左上隅から始まり、中心点から始めてからすべての方向にパンすることを除いて、コードは私にとってはうまく機能します。私はそれを行うために必要な計算について十分に知らないので、それを解決する方法、または開始点を指定するために何をする必要があるかについてのいくつかの指針を本当に感謝しています.

jQuery は次のとおりです。

var clicking = false;
var previousX;
var previousY;

$("#scroll").mousedown(function(e) {
    e.preventDefault();
    previousX = e.clientX;
    previousY = e.clientY;
    clicking = true;
});

$(document).mouseup(function() {

    clicking = false;
});

$("#scroll").mousemove(function(e) {

    if (clicking) {
        e.preventDefault();
        var directionX = (previousX - e.clientX) > 0 ? 1 : -1;
        var directionY = (previousY - e.clientY) > 0 ? 1 : -1;
        $("#scroll").scrollLeft($("#scroll").scrollLeft() + (previousX - e.clientX));
        $("#scroll").scrollTop($("#scroll").scrollTop() + (previousY - e.clientY));
        previousX = e.clientX;
        previousY = e.clientY;
    }
});

$("#scroll").mouseleave(function(e) {
    clicking = false;
});

htmlは次のとおりです。

<div id="scroll">
  <img src="sampleimg.jpg" class="background" />
</div>
<img src="sampleoverlay.png" class="overlay" />

CSSは次のとおりです。

#scroll {
  width: 580px;
  height: 620px;
  overflow: hidden;
}

.background {
  width: 100%;
  height: 100%;
}

.overlay {
  width: 100%; 
  height: 100%;
  position: absolute;
  pointer-events: none;
}

これが本当に明らかである場合はお詫び申し上げます。私の質問に答えてくれるものは見つかりませんでしたが、正しいものを探していなかった可能性があります。