jQuery ドラッグ可能を使用して 2 つの div 間の同期スクロールを作成しようとしましたが、適切に動作させるための正しい「方程式」を見つけるのに苦労しています。
基本的に、私には左右の 2 つの側面があります。左側には、ユーザーが上下にドラッグできる「拡大鏡」（私の例では紫と黒のボックス）だけでなく、情報（小さいスケール...私の例ではオレンジ色の長方形）が保持されますjQuery ドラッグ可能を使用して情報。右側には同じ情報のコピーが保持されますが、はるかに大きなスケールでのみ保持されます (私の例では背の高いピンク色のボックス)。
左側の情報に「拡大鏡」をドラッグすると、右側の大きい方の情報が「拡大鏡」と同期して上下にスクロールするようにしようとしています。私の問題は、大規模なdivの位置（メインラッパーに関して）を「拡大鏡」の中心の位置と一致させることです（小規模な情報を保持する小さなdivに関して）。これは、いずれかの div のサイズに関係なく、常に正しい関係であるため、動的に機能する必要があります。
また、メイン ラッパーの中心を大規模情報の「上部」または焦点として機能させたいと考えています...したがって、拡大鏡が小規模情報の上部にある場合、大規模情報の上部はメインラッパーの垂直方向の中央に揃えます。ご不明な点がございましたら、お気軽にお問い合わせください。ありがとう！
実際の例へのリンクは次のとおりです: http://people.rit.edu/bjc7188/
そして、これが私が取り組んできたスクリプトの一部です。
$(document).ready(function() {
$("#dragMe").draggable({
axis: "y",
drag: function(event, ui)
{
var $target = ($("#toZoom").height()/2) - ((($("#dragMe").position().top + $("#dragMe").height()/2)*($("#scroller").height()/$("#toZoom").height())));
$("#scroller").css({ top: ($target + $("#dragMe").height()/2) + "px" });
},
});
});
ちょっとずさんですが、まさに私がやろうとしていることにはうまくいきます。ただし、左のオレンジ色の div のサイズを変更すると機能しません。ピンクまたはオレンジの div のサイズに関係なく、動的に機能する方程式が必要です。