jQueryのscrollTop値は何を意味しますか？

Question

私はscrollTopメソッドを使って無限のスクロールを実装しています（jQueryプラグインを提案しないでください、私はそれらが存在することを知りません）。このバイオリンを考える

：https://jsfiddle.net/ve8s5fdx/は

<div id="outter"> 
    <div class="inner"></div> 
    <div class="inner"></div> 
</div> 
<div id="scroll"></div> 

#outter { 
    height: 100px; 
    width: 100%; 
    overflow-y:auto; 
} 

.inner { 
    height: 150px; 
    width: 50%; 
    border: dashed black 2px; 
    background-color: grey; 
} 

それは、スクロールバーが要素の最上部にあるときに値が0であるという意味になりますが、なぜ「208」、それは一番下にありますか？ #outter divは100pxと高く、そのコンテンツは300px以上です。

Answer 1

@ Rory McCrossanが言ったこと。 100ピクセルをスクロールすると、.scrollTopに100が表示されます。 scrollTopは、ウィンドウと要素の間のスペースを測定します。それで、あなたの要素がどれほど高いかは問題ではありません。

.innerにはCSSルールbox-sizing: border-box;がありません。ボーダーはdiv外に追加され、2pxの幅になります。あなたの場合、.innerの要素はいずれも高さが154pxであることを意味します。あなたはそれらの2つを持っているので、.outerの内容は308pxです。

.outer-elementは100ピクセル高いので、100ピクセルは常に表示されます。したがって、ウィンドウが一番下までスクロールされると、scrollTopは308px - 100px = 208pxを表示します。

.outerを高さ50pxに変更した場合、スクロールトップは下にスクロールすると258pxと表示されます。

Answer 2

$.scrollTop：

垂直スクロール位置は がスクロール領域の上視界から隠されている画素の数と同じです。スクロールバーが非常に上部に ある、または要素がスクロール可能でない場合は、この数は あなたのフィドルの検査0

になる場合、あなたは2つの.inner sが308の組み合わせの高さを持っていることがわかりますpx。あなたの外側（スクロール）のdivは100pxの高さです。

だからあなた.scrollTop()、はtotal inner height - visible height、または208ピクセルであるスクロール可能な領域の上に視界から隠されているピクセルの数。