Vérifiez si un utilisateur a fait défiler vers le bas

Je fais un système de pagination (un peu comme Facebook) où le contenu se charge lorsque l'utilisateur défile vers le bas. J'imagine que la meilleure façon de le faire est de trouver quand l'utilisateur est en bas de la page et d'exécuter une requête ajax pour charger plus de messages.

Le seul problème est que je ne sais pas comment vérifier si l'utilisateur a fait défiler vers le bas de la page avec jQuery. Des idées?

Je dois trouver un moyen de vérifier quand l'utilisateur a fait défiler vers le bas de la page avec jQuery.

Utilisez l' .scroll()événement windowcomme ceci:

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

Vous pouvez le tester ici , cela prend le défilement supérieur de la fenêtre, alors combien il défile, ajoute la hauteur de la fenêtre visible et vérifie si cela est égal à la hauteur du contenu global ( document). Si vous vouliez plutôt vérifier si l'utilisateur est près du bas, cela ressemblerait à ceci:

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

Vous pouvez tester cette version ici , ajustez-la simplement 100au pixel du bas sur lequel vous souhaitez déclencher.

La réponse de Nick Craver fonctionne très bien, évitez le problème dont la valeur $(document).height()varie selon le navigateur.

Pour le faire fonctionner sur tous les navigateurs, utilisez cette fonction 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
    );
}

à la place de $(document).height(), de sorte que le code final soit:

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

Je ne sais pas exactement pourquoi cela n'a pas encore été publié, mais selon la documentation de MDN , le moyen le plus simple consiste à utiliser les propriétés natives javascript:

element.scrollHeight - element.scrollTop === element.clientHeight

Renvoie true lorsque vous êtes au bas d'un élément déroulant. Il suffit donc d'utiliser javascript:

element.addEventListener('scroll', function(event)
{
    var element = event.target;
    if (element.scrollHeight - element.scrollTop === element.clientHeight)
    {
        console.log('scrolled');
    }
});

scrollHeightont un large support dans les navigateurs, de ie 8 pour être plus précis, tandis que clientHeightet scrollTopsont tous deux pris en charge par tout le monde. Même c.-à-d. 6. Cela devrait être sûr pour tous les navigateurs.

Pour ceux qui utilisent la solution de Nick et reçoivent des alertes / événements répétés, vous pouvez ajouter une ligne de code au-dessus de l'exemple d'alerte:

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

Cela signifie que le code ne se déclenchera que la première fois que vous vous trouverez à moins de 100 px du bas du document. Cela ne se répétera pas si vous faites défiler vers le haut puis vers le bas, ce qui peut être utile ou non selon l'utilisation que vous faites du code de Nick.

Suite à l'excellente réponse acceptée de Nick Craver, vous pouvez limiter l'événement de défilement afin qu'il ne soit pas déclenché si fréquemment, augmentant ainsi les performances du navigateur :

var _throttleTimer = null;
var _throttleDelay = 100;
var $window = $(window);
var $document = $(document);

$document.ready(function () {

    $window
        .off('scroll', ScrollHandler)
        .on('scroll', ScrollHandler);

});

function ScrollHandler(e) {
    //throttle event:
    clearTimeout(_throttleTimer);
    _throttleTimer = setTimeout(function () {
        console.log('scroll');

        //do work
        if ($window.scrollTop() + $window.height() > $document.height() - 100) {
            alert("near bottom!");
        }

    }, _throttleDelay);
}

La réponse de Nick Craver doit être légèrement modifiée pour fonctionner sur iOS 6 Safari Mobile et devrait être:

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

La modification de $ (window) .height () en window.innerHeight doit être effectuée car lorsque la barre d'adresse est masquée, 60 pixels supplémentaires sont ajoutés à la hauteur de la fenêtre, mais l'utilisation $(window).height()ne reflète pas ce changement, tandis que l'utilisation de le window.innerHeightfait.

Remarque : La window.innerHeightpropriété inclut également la hauteur de la barre de défilement horizontale (si elle est rendue), contrairement à $(window).height()ce qui n'inclura pas la hauteur de la barre de défilement horizontale. Ce n'est pas un problème dans Mobile Safari, mais cela pourrait provoquer un comportement inattendu dans d'autres navigateurs ou dans les futures versions de Mobile Safari. Changer ==pour >=pourrait résoudre ce problème dans la plupart des cas d'utilisation courants.

En savoir plus sur la window.innerHeightpropriété ici

Voici une approche assez simple

const didScrollToBottom = elm.scrollTop + elm.clientHeight == elm.scrollHeight

Exemple

elm.onscroll = function() {
    if(elm.scrollTop + elm.clientHeight == elm.scrollHeight) {
        // User has scrolled to the bottom of the element
    }
}

Où elmest un élément extrait de ie document.getElementById.

Voici un morceau de code qui vous aidera à déboguer votre code, j'ai testé les réponses ci-dessus et les ai trouvées boguées. J'ai testé les éléments suivants sur Chrome, IE, Firefox, IPad (Safari). Je n'en ai pas d'autres installés 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 peut y avoir une solution plus simple, mais je me suis arrêté au moment où ça a marché

Si vous rencontrez toujours des problèmes avec un navigateur escroc, voici un 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 fera gagner du temps à quelqu'un.

Veuillez cocher cette réponse

 window.onscroll = function(ev) {
    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
       console.log("bottom");
    }
};

Vous pouvez faire footerHeight - document.body.offsetHeightpour voir si vous êtes près du pied de page ou atteint le pied de page

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

Il calcule la barre de défilement de la distance jusqu'au bas de l'élément. Égal à 0, si la barre de défilement a atteint le bas.

Voici mes deux cents:

$('#container_element').scroll( function(){
        console.log($(this).scrollTop()+' + '+ $(this).height()+' = '+ ($(this).scrollTop() + $(this).height())   +' _ '+ $(this)[0].scrollHeight  );
        if($(this).scrollTop() + $(this).height() == $(this)[0].scrollHeight){
            console.log('bottom found');
        }
    });

Pure JS avec multi-navigateur et anti - rebond (assez bonnes performances )

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,output

PS: Debouncer, getScrollXY, getDocHeightpas écrit par moi

Je montre juste comment ça marche, et comment je vais faire

Ma solution en clair js:

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

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

<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>

Essayez ceci pour une condition de correspondance si faites défiler vers le bas

if ($(this)[0].scrollHeight - $(this).scrollTop() == 
    $(this).outerHeight()) {

    //code for your custom logic

}

Nick répond bien, mais vous aurez des fonctions qui se répètent pendant le défilement ou ne fonctionneront pas du tout si l'utilisateur a zoomé sur la fenêtre. J'ai trouvé une solution simple juste mathématique autour de la première hauteur et cela fonctionne comme prévu.

    if (Math.round($(window).scrollTop()) + $(window).innerHeight() == $(document).height()){
    loadPagination();
    $(".go-up").css("display","block").show("slow");
}

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

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

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

offsetHeightdevrait donner le visible réelle hauteur d'un élément (y compris le rembourrage, la marge, et des barres de défilement), et scrollHeightest la totalité de la hauteur d'un élément (y compris les zones invisibles débordé).

jQuery« s .outerHeight()devraient donner des résultats similaires à de JS .offsetHeight- la documentation pour MDN offsetHeightne définit pas clairement son soutien multi-navigateur. Pour couvrir plus d'options, c'est plus complet:

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

Au lieu d'écouter l'événement scroll, utiliser Intersection Observer est celui peu coûteux pour vérifier si le dernier élément était visible dans la fenêtre (c'est-à-dire que l'utilisateur a été fait défiler vers le bas). Il a également pris en charge IE7 avec le polyfill .

var observer = new IntersectionObserver(function(entries){
   if(entries[0].isIntersecting === true)
      console.log("Scrolled to the bottom");
   else
      console.log("Not on the bottom");
}, {
   root:document.querySelector('#scrollContainer'),
   threshold:1 // Trigger only when whole element was visible
});

observer.observe(document.querySelector('#scrollContainer').lastElementChild);

#scrollContainer{
  height: 100px;
  overflow: hidden scroll;
}

<div id="scrollContainer">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
  <div>Item 6</div>
  <div>Item 7</div>
  <div>Item 8</div>
  <div>Item 9</div>
  <div>Item 10</div>
</div>

Toutes ces solutions ne fonctionnent pas pour moi sur Firefox et Chrome, donc j'utilise des fonctions personnalisées de Miles O'Keefe et meder omuraliev comme ceci:

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

function getWindowSize()
{
  var myWidth = 0, myHeight = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
    myHeight = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
    myHeight = document.body.clientHeight;
  }
  return [myWidth, myHeight];
}

$(window).scroll(function()
{
    if($(window).scrollTop() + getWindowSize()[1] == getDocHeight())
    {
        alert("bottom!");
    }
});

Voici mes deux cents car la réponse acceptée n'a pas fonctionné pour moi.

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

Permettez-moi de montrer l'approche sans JQuery. Fonction JS simple:

function isVisible(elem) {
  var coords = elem.getBoundingClientRect();
  var topVisible = coords.top > 0 && coords.top < 0;
  var bottomVisible = coords.bottom < shift && coords.bottom > 0;
  return topVisible || bottomVisible;
}

Petit exemple d'utilisation:

var img = document.getElementById("pic1");
    if (isVisible(img)) { img.style.opacity = "1.00";  }

J'ai utilisé @ddanone answerear et ajouté un 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();
    }
}

}

Pour arrêter l'alerte répétée de la réponse de Nick

ScrollActivate();

function ScrollActivate() {
    $(window).on("scroll", function () {
        if ($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
            $(window).off("scroll");
            alert("near bottom!");
        }
    });
}

Google Chrome donne toute la hauteur de la page si vous appelez $(window).height()

Au lieu de cela, utilisez window.innerHeightpour récupérer la hauteur de votre fenêtre. La vérification nécessaire doit être:

if($(window).scrollTop() + window.innerHeight > $(document).height() - 50) {
    console.log("reached bottom!");
}

Apparemment, ce qui a fonctionné pour moi était le «corps» et non la «fenêtre» comme ceci:

$('body').scroll(function() {


 if($('body').scrollTop() + $('body').height() == $(document).height()) {
     //alert at buttom
 }
 });

pour une compatibilité entre navigateurs:

  function getheight(){
    var doc = document;
    return  Math.max(
        doc.body.scrollHeight, doc.documentElement.scrollHeight,
        doc.body.offsetHeight, doc.documentElement.offsetHeight,
        doc.body.clientHeight, doc.documentElement.clientHeight

        );
   }

puis au lieu de $ (document) .height () appelez la fonction getheight ()

$('body').scroll(function() {


   if($('body').scrollTop() + $('body').height() == getheight()  ) {
     //alert at bottom
 }
});

pour une utilisation proche du fond:

$('body').scroll(function() {


if($('body').scrollTop() + $('body').height() > getheight() -100 ) {
    //alert near bottom
 }
 });