Ermitteln, ob nach unten scrollen in div

Question

Ich habe ember app.In, die ich in navbar Symbol haben, die wenn Sie ein Dropdown mit Benachrichtigung anzeigen.Ich habe die maximale Höhe von Dropdown als 390px.Now möchte ich bestimmen, wann Benutzer hat den unteren Rand des Dropdown erreicht, so dass ich einen Ajax-Aufruf an den Server für weitere Daten vornehmen kann.

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); 
    }, 

wenn ich $ tun ('ps-content'). Höhe wird 390px.How geben zu bekommen Die gesamte Inhaltshöhe wird in das Dropdown-Menü gerendert?

In der "viewPortTop" bekomme ich, wie viel Benutzer scrollte.Aber ich bin nicht in der Lage herauszufinden, was ich tun soll "distanceToViewportTop" So, wenn der Benutzer unten erreicht ist der Unterschied Null. Ich kann nicht verwenden Documnet Höhe und Fensterhöhe, da es die gesamte Seitenhöhe dauert. Für die ganze Seite ist es Documnet - Fensterhöhe, um die untere Seite zu bekommen. Was soll ich für div tun?

Answer 1

Es gibt einige Eigenschaften/Methoden können Sie verwenden:

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

Höhe des Inhalts des Elements

So können Sie die Summe der ersten beiden Eigenschaften annehmen kann, und wenn es gleich dem letzte Eigenschaft, haben Sie das Ende erreicht:

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

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