現在、私は作成しようとしている小さなImage Zoom/Scrollerスクリプトを試しています。はい、そこにはプラグインがあることがわかりますが、これは軽量版とこれ用に開発しています学習する。私が今持っている主な問題は、画像の幅と高さだけに画像のスクロールを制限する方法がわからないことです。ユーザーが画像の幅や高さになったときに画像がスクロールしないようにスクリプトを設定して、画像がdivからスクロールされないようにします。以下は私のスクリプトのバイブルです。私が正しい方向に動くのを助けるためのアドバイスやヒントは、非常に高く評価されます。click here to go to fiddleJavaScriptスクロール画像エッジ検出
私はこれらのうちの1つを以前構築しました。
原則として、mousedown,mouseup、mousemoveという3つのイベントを聴いています。
まず、divを使用して、画像をdivのbackground-imageとして設定することをお勧めします。これにより、background-positionを使用してdivの内側で画像を移動できます。これをdiv#containerとします。
mousedownには、画像の背景位置の座標を記録します。ページの読み込み時には、0 0になります（あなたが他の何かになるように指示していない限り、あなたはそうではないと仮定します）。 mousedownイベントが発生すると、これは本質的にドラッグ操作の開始です。したがって、draggingStarted変数を設定することをお勧めします。
mousemoveには、draggingStartedがtrueであるかどうかを確認する必要があります。そうであれば、マウスカーソルが移動した相対距離を計算し、それに応じて背景画像の座標を変更します。
mouseupには、draggingStarted変数をfalseに設定します。これは、mousemoveイベントが発生した場合、イメージの位置は固定されたままになるためです。
ここで問題となっているのは、これまでに与えられた解決策では背景位置の座標が画像のオーバーシュートを許容するため、部分的に空白の#containerが得られることです。 の解決策の問題は、画像の寸法を記録してから、背景画像を移動する距離を計算するときに（mousemoveの関数で）、新しい背景画像の座標が外側にあるかどうかを確認してください画像の境界。彼らがそうであれば、それを許可しないでください！
私に今始めるとありがとう、ありがとう、私はあなたのイメージを保持するためにdiを使用して絶対とドラッグは、イメージの上と左のポーズを変更する原因は何ですか？メソッドを使ってイメージを作成するdivのイメージをbg？ – Lawrence
Hmm。さて、あなたは確かにその方法を試すことができますが、私は '背景画像 'で成功しました。 'div'の' position'を 'relative'に設定し、それに絶対的に画像を配置する必要があります。あなたはdivから画像がこぼれ落ちるのを隠す必要があるので、divで 'overflow：hidden'を使用してください。 – Alex
これはまさに私が目指しているものです。上記の私の例をチェックしてください。 – Lawrence