jQuery UIとjQueryのカスタムスクロールの数学

Question

私はプロジェクト用のカスタムスクロールを構築していますが、私はスクロールハンドラをウィンドウの下部に配置し、コンテンツも下部に届くようにする方法を試していますすなわち、このフィドルで私は作った：http://jsfiddle.net/BPcfc/私はドラッグしたハンドルの同じマイナス位置にウィンドウの位置のトップを設定するためにドラッグ可能なjQueryのUIを使用しますが、ウィンドウの下部にハンドルを引っ張ると、ビュー。私はこれを実行するために何を計算するか知っていません！

関連JS：

$("#dragger").draggable({ 
    axis: "y", 
    containment: "parent", 
    drag: function(event, ui) { 
     var top = ui.offset.top; 
     $('#move').css('top', '-'+top+'px');      
    } 
}); 

Answer 1

あなたのドラッグハンドルの先頭位置は、ただ一つのことです。

• スクロールウィンドウのクライアント領域の高さ。
• コンテンツの高さです。
• ドラッグハンドルの高さです。これらの値を用いて

、計算が非常に簡単です：

(content_height - window_height)/(window_height - handle_height) * top 
^Part 1       ^Part 2       ^Part 3 

あなたのコンテンツの1画面分が画面上に表示されているので、パート1が必要とされています。ハンドルの一番上の位置は0からwindow_height - handle_height)の範囲しかないため、パート2が必要です。パート3でtopで単純にそれを乗算すれば、完了です。

私のコードに少しでも1つのライナーを追加して自由に削除できます。ハンドルのサイズを変更して、ユーザーにどのくらいのコンテンツを期待するかを大まかに伝えます。

私はあなたに残ります。スクロールが必要な場合は、ゼロ値を確認する必要があります。

jsFiddle Demo

Javascriptを：

var window_height = $('#window').height(); 
var content_height = $('#move').height(); 

// Remove this line if you want a fixed size dragger 
$('#dragger').css('height', Math.round(window_height/content_height * window_height)); 

var handle_height = $('#dragger').height(); 

$("#dragger").draggable({ 
    axis: "y", 
    containment: "parent", 
    drag: function(event, ui) { 
     var top = ui.offset.top; 
     var newpos = Math.floor((content_height - window_height)/(window_height - handle_height) * top); 
     $('#move').css('top', '-'+newpos+'px');      
    } 
}); 
​ 

CSS：

#window { 
    width: 500px; 
    height: 500px; 
    border: 1px solid red; 
    position: relative; 
    overflow: hidden;  
} 

#dragger { 
    width: 32px; 
    height: 32px; 
    background: green; 
    position: absolute; 
    right: 0; 
    top: 0; 
} 

#move { 
    width: 100px; 
    background: blue; 
    position: absolute; 
    top: 0; 
    left: 0; 
    word-break: break-word; 
    color: white; 
} 
​ 

HTML：

<div id="window"> 

    <div id="move">Bacon swine pastrami, prosciutto corned beef cow capicola chicken. Ham hock andouille shoulder short ribs strip steak beef ribs. Short loin swine andouille beef ribs, capicola sausage chicken salami strip steak corned beef meatball shankle t-bone chuck. Beef swine biltong, brisket meatball boudin pastrami chicken salami chuck shankle meatloaf pork loin. Meatloaf shoulder pig, pancetta beef ribs kielbasa ham hock ham t-bone.Bacon swine pastrami, prosciutto corned beef cow capicola chicken. Ham hock andouille shoulder short ribs strip steak beef ribs. Short loin swine andouille beef ribs, capicola sausage chicken salami strip steak corned beef meatball shankle t-bone chuck. Beef swine biltong, brisket meatball boudin pastrami chicken salami chuck shankle meatloaf pork loin. Meatloaf shoulder pig, pancetta beef ribs kielbasa ham hock ham t-bone.</div> 
    <div id="dragger"></div>   

</div> 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script> 

Answer 2

すでにjqueryを使用しているので、ホイールを再作成する代わりにスクロールバーにjqueryプラグインを使用することができます。 Tiny Scrollbarをご覧ください。私はそれを使用していますし、一般的なブラウザ（IE8、クロム、ファイアフォックス、サファリ、モバイルデバイス）で正常に動作します。