Scorrimento infinito che rileva la parte inferiore della pagina solo se non c'è nulla al di sotto - javascript, jquery, html, angularjs

Sto facendo una pagina di scorrimento infinita con angularjsche carica più elementi quando l'utente raggiunge la fine della pagina. Il mio problema è che sotto il contenitore di scorrimento infinito potrebbe o meno avere più "roba". Quindi non voglio caricare più elementi se l'utente raggiunge la fine della pagina se è presente quella "roba". Quindi voglio caricare più elementi quando il contenitore a scorrimento infinito raggiunge la fine di quel contenitore e non la fine di la pagina.

Per lo scroll infinito ho una direttiva angularjs come questa:

myApp.directive("scroll", function ($window) {
return function(scope, element, attrs) {
angular.element($window).bind("scroll", function(event) {
var docHeight = $(document).height();
var reachBottom = $($window).scrollTop() == (docHeight - $($window).height());
if (reachBottom) {
setTimeout(scope.loadMore(), 100);
}
});
};
});

risposte:

puoi ottenere l'altezza della roba sotto il contenitore di scorrimento infiniti e usarla

 var docHeight = $(document).height();
var stuffHeight = $("#stuff").height();
var reachBottom = $($window).scrollTop() == (docHeight - ($($window).height() + stuffHeight));
if (reachBottom) {
setTimeout(scope.loadMore(), 100);
}

Solo usando jQuery puoi farlo. Vedi questo frammento di codice di seguito.

<script>
$(function () {
var w = $(window);
loadNewPage();

// Each time the user scrolls
w.scroll(function () {
// End of the document reached?
if ($(document).height() - win.height() == win.scrollTop()){
loadNewPage();
}
});
});
</script>