Vérifier si un utilisateur a un défilement vers le bas

Nick Craver réponse fonctionne très bien, de rechange, la question que la valeur de $(document).height() varie selon le navigateur.

Pour le faire fonctionner sur tous les navigateurs, utilisez cette fonction à partir de James Padolsey:

function getDocHeight() {
    var D = document;
    return Math.max(
        D.body.scrollHeight, D.documentElement.scrollHeight,
        D.body.offsetHeight, D.documentElement.offsetHeight,
        D.body.clientHeight, D.documentElement.clientHeight
    );
}

en place de $(document).height(), de sorte que le code final est:

$(window).scroll(function() {
       if($(window).scrollTop() + $(window).height() == getDocHeight()) {
           alert("bottom!");
       }
   });

Pour les personnes à l'aide de Nick solution et obtenir des alertes répétées /événements de la cuisson, vous pouvez ajouter une ligne de code au-dessus de l'alerte exemple:

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
       $(window).unbind('scroll');
       alert("near bottom!");
   }
});

Cela signifie que le code se déclenche uniquement la première fois que vous êtes à l'intérieur de 100px de bas du document. Il ne se répétera pas si vous défiler l'écran vers le haut et ensuite vers le bas, qui peut ou peut ne pas être utile en fonction de ce que vous êtes à l'aide du Pseudo code pour.

Nick Craver la réponse doit être légèrement modifié pour qu'il fonctionne sur iOS 6 Safari Mobile et doit être:

$(window).scroll(function() {
   if($(window).scrollTop() + window.innerHeight == $(document).height()) {
       alert("bottom!");
   }
});

Changer $(window).hauteur() à fenêtre.innerHeight doit être fait, parce que quand la barre d'adresse est cachée supplémentaires 60px sont ajoutés à la fenêtre de la hauteur, mais à l'aide de $(window).height() ne pas tenir compte de ce changement, tout en utilisant window.innerHeight n'.

Note: Le window.innerHeight propriété comprend également la barre de défilement horizontale de la hauteur (si elle est rendue), à la différence de $(window).height() qui ne comprendront pas la barre de défilement horizontale de la hauteur. Ce n'est pas un problème dans le navigateur Safari Mobile, mais peut entraîner un comportement inattendu dans d'autres navigateurs ou les futures versions de Safari Mobile. Changer == à >= pourrait corriger cela pour la plupart des cas d'utilisation courants.

Lire plus sur le window.innerHeight propriété ici

Voici un morceau de code qui va vous aider à déboguer votre code, j'ai testé les réponses ci-dessus et les a trouvés buggy. J'ai test les suivants sur Chrome, IE, Firefox, IPad(Safari). Je n'ai pas d'autres installée pour tester...

<script type="text/javascript">
   $(function() {
      $(window).scroll(function () {
         var docElement = $(document)[0].documentElement;
         var winElement = $(window)[0];

         if ((docElement.scrollHeight - winElement.innerHeight) == winElement.pageYOffset) {
            alert('bottom');
         }
      });
   });
</script>

Il y a peut être une solution plus simple, mais j'ai arrêté au moment où IL a TRAVAILLÉ

Si vous rencontrez toujours des problèmes avec certains voyous navigateur, voici un peu de code pour vous aider à déboguer:

<script type="text/javascript">
$(function() {
$(window).scroll(function () {
var docElement = $(document)[0].documentElement;
var details = "";
details += '<b>Document</b><br />';
details += 'clientHeight:' + docElement.clientHeight + '<br />';
details += 'clientTop:' + docElement.clientTop + '<br />';
details += 'offsetHeight:' + docElement.offsetHeight + '<br />';
details += 'offsetParent:' + (docElement.offsetParent == null) + '<br />';
details += 'scrollHeight:' + docElement.scrollHeight + '<br />';
details += 'scrollTop:' + docElement.scrollTop + '<br />';
var winElement = $(window)[0];
details += '<b>Window</b><br />';
details += 'innerHeight:' + winElement.innerHeight + '<br />';
details += 'outerHeight:' + winElement.outerHeight + '<br />';
details += 'pageYOffset:' + winElement.pageYOffset + '<br />';
details += 'screenTop:' + winElement.screenTop + '<br />';
details += 'screenY:' + winElement.screenY + '<br />';
details += 'scrollY:' + winElement.scrollY + '<br />';
details += '<b>End of page</b><br />';
details += 'Test:' + (docElement.scrollHeight - winElement.innerHeight) + '=' + winElement.pageYOffset + '<br />';
details += 'End of Page? ';
if ((docElement.scrollHeight - winElement.innerHeight) == winElement.pageYOffset) {
details += 'YES';
} else {
details += 'NO';
}
$('#test').html(details);
});
});
</script>
<div id="test" style="position: fixed; left:0; top: 0; z-index: 9999; background-color: #FFFFFF;">

J'espère que cela va sauver quelqu'un certain temps.

var elemScrolPosition = elem.scrollHeight - elem.scrollTop - elem.clientHeight;

Il calcule la distance de la barre de défilement en bas de l'élément.
Égale à 0, si la barre de défilement a atteint le fond.

Pur JS avec de la croix-navigateur et anti-rebond (Pretty good performance)

var CheckIfScrollBottom = debouncer(function() {
if(getDocHeight() == getScrollXY()[1] + window.innerHeight) {
console.log('Bottom!');
}
},500);
document.addEventListener('scroll',CheckIfScrollBottom);
function debouncer(a,b,c){var d;return function(){var e=this,f=arguments,g=function(){d=null,c||a.apply(e,f)},h=c&&!d;clearTimeout(d),d=setTimeout(g,b),h&&a.apply(e,f)}}
function getScrollXY(){var a=0,b=0;return"number"==typeof window.pageYOffset?(b=window.pageYOffset,a=window.pageXOffset):document.body&&(document.body.scrollLeft||document.body.scrollTop)?(b=document.body.scrollTop,a=document.body.scrollLeft):document.documentElement&&(document.documentElement.scrollLeft||document.documentElement.scrollTop)&&(b=document.documentElement.scrollTop,a=document.documentElement.scrollLeft),[a,b]}
function getDocHeight(){var a=document;return Math.max(a.body.scrollHeight,a.documentElement.scrollHeight,a.body.offsetHeight,a.documentElement.offsetHeight,a.body.clientHeight,a.documentElement.clientHeight)}

Démo : http://jsbin.com/geherovena/edit?js,sortie

PS: Debouncer, getScrollXY, getDocHeight pas écrit par moi

Je viens de montrer la façon dont son travail, Et comment je vais faire

Vous pouvez essayer le code suivant,

$("#dashboard-scroll").scroll(function(){
var ele = document.getElementById('dashboard-scroll');
if(ele.scrollHeight - ele.scrollTop === ele.clientHeight){
console.log('at the bottom of the scroll');
}
});

Ma solution dans la plaine js:

JS:

let el=document.getElementById('el');
el.addEventListener('scroll', function(e) {
if (this.scrollHeight - this.scrollTop - this.clientHeight<=0) {
alert('Bottom');
}
});

CSS:

#el{
width:400px;
height:100px;
overflow-y:scroll;
}

HTML:

<div id="el">
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
</div>

Cela donne des résultats précis, lors de la vérification sur un défilement élément (c'est à dire pas window):

//`element` is a native JS HTMLElement
if ( element.scrollTop == (element.scrollHeight - element.offsetHeight) )
//Element scrolled to bottom

offsetHeight devrait donner la réel visible hauteur d'un élément (y compris les padding, margin, et barres de défilement), et scrollHeight est le ensemble hauteur d'un élément y compris les invisibles (débordé) des zones.

jQuery's .outerHeight() devrait donner des résultats similaires JS du .offsetHeight --
la documentation en MDN pour offsetHeight n'est pas claire sur sa croix-prise en charge du navigateur. Pour couvrir plus d'options, ce qui est le plus complet:

var offsetHeight = ( container.offsetHeight ? container.offsetHeight : $(container).outerHeight() );
if  ( container.scrollTop == (container.scrollHeight - offsetHeight) ) {
//scrolled to bottom
}

J'ai utilisé @ddanone answear, et ajouté de l'appel Ajax.

$('#mydiv').on('scroll', function(){
function infiniScroll(this);
});
function infiniScroll(mydiv){
console.log($(mydiv).scrollTop()+' + '+ $(mydiv).height()+' = '+ ($(mydiv).scrollTop() + $(mydiv).height())   +' _ '+ $(mydiv)[0].scrollHeight  );
if($(mydiv).scrollTop() + $(mydiv).height() == $(mydiv)[0].scrollHeight){
console.log('bottom found');
if(!$.active){ //if there is no ajax call active ( last ajax call waiting for results ) do again my ajax call
myAjaxCall();
}
}

}

Voici mes deux cents que l'on a accepté la réponse n'a pas fonctionné pour moi.

var documentAtBottom = (document.documentElement.scrollTop + window.innerHeight) >= document.documentElement.scrollHeight;