jQuery：divがスクロールダウンされたことを確認する方法

Question

divを定義した高さとoverflow:scroll;があります。内容が長すぎてスクロールバーが表示されません。

ichyの部分です。その内部HTMLのいくつかは、常に不思議に見えます（正確には、tableFilterプラグインによって生成されたテーブルのフッタ）。私はこのフッタが必要でないときに消えるようにしたいと思います（実際には<div>の境界線の外に現れます）。私はそれを消すことを決心しましたが、z-indexを-1000に設定しました。しかし、<div>が完全にスクロールして表示されるようにしたい。

ユーザーが下にスクロールしたことを確認するにはどうすればよいですか？以下の回答からの助けを使用して

---

、私はscrollTop属性を使用しますがscrollTopとinnerHeightとの違いは、スクロールバープラスいくつかの正体不明のデルタのサイズです。スクロールバーは、Windows上のほとんどのブラウザでは16ピクセル高いですが、私は<div>のコンテンツのボーダーが大きく表示されているように、Firefoxでは17、IEでは20のような違いがあります。

スクロールバーのサイズを計算するための方法（実際には2つの方法）はthereです。 、あなたのDIVのスクロールイベントで

element.scrollTop; 

行うことが一致する（または一致に近い）場合は、要素の高さに対してチェックするためにその情報を使用します。

Answer 1

divの高さをscrollTopの位置と要素の高さと比較する必要があります。

div要素は、単にこれを行うことにより、スクロールダウンされている場合は、知ることができる

$(div).scroll(function(){ 
    if(isScrollBottom()){ 
    //scroll is at the bottom 
    //do something... 
    } 
}); 

function isScrollBottom() { 
    var elementHeight = $(element).height(); 
    var scrollPosition = $(div).height() + $(div).scrollTop(); 
    return (elementHeight == scrollPosition); 
} 

Answer 2

ませjQueryのは、その情報を取得する必要はありませんあなたが望むものなら、なんでも。

Answer 3

：

if (div.scrollTop + div.clientHeight == div.scrollHeight){ 
//... 
} 

それはあなただけscrollHeightを使用する必要があるのFirefox、ChromeとIE8

Answer 4

function elementInViewport(el) { 
    var listcontent= $(".listContainer")[0].getBoundingClientRect(); 
    var rect = $(el)[0].getBoundingClientRect(); 
    return [(rect.top >= 0 && rect.left >= 0 && rect.bottom <= listcontent.bottom), (rect.bottom - listcontent.bottom)] 
} 

Answer 5

上で動作します高さの代わりにdivのプロパティ。 Shaun Humphriesが以前書いた関数isScrollBottomは（）トリックを行うだろう単に

$(this).scrollTop()

、私が思うに、この

function isScrollBottom() { 
var totalHeight = $("divSelector")[0].scrollHeight; 
var scrollPosition = $("divSelector").height() + $("divSelector").scrollTop(); 
return (totalHeight == scrollPosition); 
} 

Answer 6

のように置くことができます。

Answer 7

これはdiv要素に限定されるものではない。

toallyScrolled = element.scrollHeight - element.scrollTop === element.clientHeight; 

MDN Element.scrollHeightから。そのページには素晴らしいデモもあります。