divの下にスクロールするかどうかを決定する

Question

私はemberのapp.Inを持っている私はクリックしたときに通知をドロップダウンを表示するnavbarのアイコンがあります。私は390px.Nowとしてドロップダウンの最大高を設定しましたユーザーがドロップダウンの最下部に到達したので、より多くのデータをサーバーに送信することができます。

HTML

<div class="ps-content"> 
.....notification content..... 
</div> 

CSS

.ps-container{ 
    max-height: 390px; 
    position: relative; 
} 

JS

didInsertElement: function(){ 
    $('.ps-content').on('scroll', $.proxy(this.didScroll, this)); 
    }, 
    willDestroyElement: function(){ 
    $('.ps-content').off('scroll', $.proxy(this.didScroll, this)); 
    }, 

    didScroll: function(){ 
    if (this.isScrolledToBottom()) { 
     this.sendAction('loadMore'); 
    } 
    }, 

    // we check if we are at the bottom of the page 
    isScrolledToBottom: function(){ 
     var distanceToViewportTop = WHAT SHOULD I AM DO HERE ? 
     var viewPortTop = $('.ps-content').scrollTop(); 
     if (viewPortTop === 0) { 
     return false; 
     } 
     return (viewPortTop - distanceToViewportTop === 0); 
    }, 

私は$（ 'PS-コンテンツ'）を行うとき。取得する390px.Howを与えている高さコンテンツ全体の高さがドロップダウンに表示されますか？

"viewPortTop"では、スクロールされたユーザーの数が増えていますが、私は "distanceToViewportTop"をどうすればいいのか分かりません。ユーザーが底に達すると差がゼロになります。 documnetの高さとウィンドウの高さは、ページ全体の高さを取るので。全体のページのためには、documnetです - 下のページを取得するウィンドウの高さ。私はdivのために何をすべきですか？

Answer 1

あなたが使用できるいくつかのプロパティ/メソッドがあります：要素

のコンテンツの

$().scrollTop()//how much has been scrolled 
$().innerHeight()// inner height of the element 
DOMElement.scrollHeight// 

高さは、あなたが最初の二つの特性の総和を取ることができ、それがに等しいとき

jQuery(function($) { 
    $('#flux').on('scroll', function() { 
     if($(this).scrollTop() + $(this).innerHeight() >= $(this) [0].scrollHeight) { 
      alert('end reached'); 
     } 
    }) 
}); 

http://jsfiddle.net/doktormolle/w7X9N/

：最後のプロパティは、あなたが最後に到達しました