jQuery: la détection d'atteindre le fond du défilement ne fonctionne pas, ne détecte que le haut

Donc en gros mon problème est apparemment simple.

Vous pouvez le voir en action à http://furnace.howcode.com (veuillez noter que les données sont renvoyées via Ajax, donc si rien ne se passe donner quelques instants!).

Ce qui doit arriver, est dans la deuxième colonne lorsque vous atteignez le fond de défilement, les 5 les résultats sont renvoyés.

Mais ce qui se passe réellement est elle renvoie uniquement l'5 résultats lorsque vous appuyez sur le HAUT de la zone de défilement. Essayez-le: faites défiler vers le bas, rien ne se passe. Faire défiler en arrière vers le haut, les résultats sont retournés.

Ce qui va mal?

Voici mon code que j'utilise:

$('#col2').scroll(function(){
    if ($('#col2').scrollTop() == $('#col2').height() - $('#col2').height()){
       loadMore();
    }
});

loadMore(); est la fonction qui récupère les données et ajoute il.

Donc ce qui ne va pas ici? Merci pour votre aide!

source d'informationauteur Jack

  1. 11

    Votre calcul est faux, votre de dire si la barre de défilement de la position est égale à la hauteur de la colonne moins la hauteur de la colonne (qui est égal à zéro) de la charge plus. c'est pourquoi votre loadMore() est appelé à la tête de votre col.

    Essayer:

    $('#col2').scroll(function(){
    if ($('#col2').scrollTop() == $('#col2').height()){
       loadMore();
    }
});
  2. 24

    Ce qui suit a été testé et fonctionne très bien:

    $(window).scroll(function() {
  if ($(window).scrollTop() == $(document).height() - $(window).height()) {
    loadMore();
  }
});
  3. 13

    Ce qui a fonctionné pour moi dans le passé.

    var col = $('#col2');
col.scroll(function(){
   if (col.outerHeight() == (col.get(0).scrollHeight - col.scrollTop()))
       loadMore(); 
});

    Voici un bon explication trop.

  4. 2

    J'ai trouvé une alternative qui fonctionne.

    Aucune de ces réponses a fonctionné pour moi (actuellement à l'essai dans FireFox 22.0), et après beaucoup de recherches, j'ai trouvé, ce qui semble être un beaucoup plus propre et simple de la solution.

    Solution mise en œuvre:

    function IsScrollbarAtBottom() {
    var documentHeight = $(document).height();
    var scrollDifference = $(window).height() + $(window).scrollTop();
    return (documentHeight == scrollDifference);
}

    De ressources:
    http://jquery.10927.n7.nabble.com/How-can-we-find-out-scrollbar-position-has-reached-at-the-bottom-in-js-td145336.html

    Ce qui concerne

  5. 1

    La solution que jordanstephens posté est sur la bonne voie. Cependant, ce que vous avez besoin n'est pas à la hauteur de #col2, vous avez besoin de la hauteur de l'élément parent de #col2.

    Exemple:

    $('#col2').scroll(function(){
  if ($('#col2').scrollTop() == $('#col2').parent().height()) {
    loadMore();
  }
}
  6. 1

    Peut-être les suivantes:

    1. HTML - enveloppez-les de tout ce qui est à l'intérieur de #col2 avec une autre DIV, dire #col2-intérieure
    2. CSS - définir une hauteur fixe et "overflow: auto" uniquement pour le #col2

    3. JS - voir le plugin ci-dessous:

      $.fn.scrollPaging = function (handler) {
    return this.each(function () {
        var $this = $(this),
            $inner = $this.children().first();

        $this.scroll(function (event) {
            var scrollBottom = $this.scrollTop() + $this.height(),
                totalScroll = $inner.height();

            if (scrollBottom >= totalScroll) {
                handler();
            }
        });

    });
};

$('#col2').scrollPaging(loadMore);
  7. 1

    @munch était le plus proche, mais si vous avez une bordure sur l'élément, puis vous devez utiliser .innerHeight() au lieu de .outerHeight() puisque ce dernier comprend la frontière et .scrollTop() n'est pas (.hauteur() est également si vous avez de remplissage). Aussi, à moins que de jQuery 1.7.1 et peut-être plus tôt, je vous recommande d'utiliser .prop('scrollHeight') au lieu de les récupérer directement à partir de la DOM. J'ai trouvé certains parlent que le DOM scrollHeight est cassé sur IE 5-8 et la fonction jQuery résumés que pour moi, au moins sur IE8.

    var $col = $('#col2');
$col.scroll(function(){
if ($col.innerHeight() == $col.prop('scrollHeight') - $col.scrollTop())
    loadMore(); 
});
  8. 0

    Je sais que cette question a déjà été résolue, mais un sujet de préoccupation lors de l'utilisation de jQuery scrollTOp() fonction sur un élément autre que sur $(window).scrollTop() ou $(document).scrollTop() depuis quelques problème comme

    jQuery: détection atteint le fond de défilement ne fonctionne pas, ne détecte que le haut

    Expliquer pourquoi scrollTop() retourne toujours 0 ici

    $(document).scrollTop() retourne toujours 0

    De sorte que vous pouvez utiliser 

    $(window).scrollTop() - $('your_selector').offset().top

    au lieu de 

    $('your_selector').scrollTOp()

    pour éviter le jQuery scrollTOp() question.

    Ma suggestion est la suivante: 

       $(window).scroll(function() {
       var $more = $('#col2');
       var top = $(window).scrollTop() - $more.offset().top;
       if(top + $more.innerHeight() >= $more[0].scrollHeight) {
          loadMore();
       }
   });