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

668

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.

Johnny
la source
C'est drôle, j'essaie de comprendre quelle fonction est appelée lorsque je défile vers le bas, donc je peux bloquer cette "fonctionnalité" exaspérante.
endolith
Pour une solution React.js, ce lien pourrait vous aider: stackoverflow.com/a/53158893/4265546
raksheetbhat

Réponses:

1024

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.

Nick Craver
la source
32
Comme d'habitude, vous y arrivez avant moi. Quoi qu'il en soit, pour l'OP, si vous avez un conteneur de messages, utilisez son ID au lieu de "fenêtre", aussi, vous voudrez peut-être changer le dernier .height () en scrollHeight
Christian
4
Firefox appelle l'alerte ("bas!"); plusieurs fois (fonctionne très bien avec le chrome et le safari)
Marco Matarazzi
3
c'est un peu bogué, si vous faites un console.log()au lieu d'alerte il répète parfois la commande.
Jürgen Paul
19
@KevinVella Vella bonne combinaison consiste à utiliser ceci avec _.debounce () dans l'utilitaire de soulignement pour l'empêcher de se déclencher jusqu'à ce que l'utilisateur ait cessé de faire défiler - underscorejs.org/#debounce -
JohnnyFaldo
3
@NickCraver existe-t-il une implémentation pure js disponible?
Dewsworld
116

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!");
       }
   });
Miles O'Keefe
la source
6
Il a mis à jour avec une fonction de version légèrement compressée getDocHeight () {var D = document; renvoyer Math.max (D.body.scrollHeight, D.documentElement.scrollHeight, D.body.offsetHeight, D.documentElement.offsetHeight, D.body.clientHeight, D.documentElement.clientHeight); }
Drew
qui m'alerte lorsque j'atteins le haut, pas le bas (Chrome).
Damien Roche
Il pourrait être préférable d'utiliser à la minplace de max, surtout s'il y a quand même une marge, pour éviter d'empêcher accidentellement l'utilisateur de défiler jusqu'à ce que vous pensez être le bas de la page.
Solomon Ucko
104

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.

Félix Gagnon-Grenier
la source
1
Notez que dans certaines situations, cela peut ne pas être le cas. Firefox 47 rapporte une zone de texte clientHeight comme 239 tandis que l'équation ci-dessus donne 253 lorsqu'elle est défilée vers le bas. Peut-être que le remplissage / la bordure ou quelque chose l'affecte? Quoi qu'il en soit, l'ajout de marge de manœuvre ne ferait pas de mal, comme var isAtBottom = ( logField.scrollHeight - logField.scrollTop <= logField.clientHeight + 50 );. Ceci est utile pour faire défiler automatiquement un champ uniquement s'il est déjà en bas (afin que l'utilisateur puisse examiner manuellement une partie spécifique d'un journal en temps réel sans perdre sa place, etc.).
Beejor
J'ajouterais qu'il est possible qu'il retourne de faux négatifs car un côté pourrait retourner une petite décimale tandis que l'autre côté renvoie un nombre entier (par exemple. 200.181819304947Et 200). J'ai ajouté un Math.floor()pour aider à gérer cela, mais je ne sais pas à quel point ce sera fiable.
Hanna
1
Pour moi, cela ne fonctionne pas sur plusieurs navigateurs. J'obtiens des résultats complètement différents sur Chrome par rapport à Firefox.
Tadej
1
J'ai essayé cela sur l'élément <body>, et cela se déclenche lorsque le navigateur défile vers le haut, pas vers le bas.
Chris Sobolewski
10
Math.abs(element.scrollHeight - element.scrollTop - element.clientHeight) <= 3.0(remplacez 3.0 par la tolérance de pixels que vous jugez appropriée à votre situation). C'est la voie à suivre car (A) clientHeight, scrollTopet clientHeightsont tous arrondis, ce qui pourrait potentiellement conduire à une erreur de 3 pixels si tous s'alignent, (B) 3 pixels sont à peine visibles pour l'utilisateur, de sorte que l'utilisateur peut penser que quelque chose ne va pas avec votre site quand ils "pensent" qu'ils sont en bas de la page alors qu'en fait ils ne le sont pas, et (C) certains appareils (en particulier ceux sans souris) peuvent avoir un comportement étrange lors du défilement.
Jack Giffin
50

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.

Tim Carr
la source
1
J'aurais juste commenté et dit où cette ligne de code est depuis sa pertinence pour la réponse de quelqu'un d'autre mais +1 pour l'intention!
Nate-Wilkins du
Désolé, je n'ai pas pu (et ne vois toujours pas) comment ajouter un commentaire à la réponse (comme je le peux ici)?
Tim Carr
Oui, les nouveaux utilisateurs ne peuvent pas ajouter de commentaire aux messages, sauf si vous obtenez plus de représentants.
Nate-Wilkins du
En dehors du premier, si vous pouviez mettre un autre si cela teste si le changement que vous vouliez que le script fasse, disons une classe ayant été appliquée à un div. Cela rendrait le second imbriqué s'il n'est pas exécuté s'il a déjà été exécuté.
1934286
comment puis-je sélectionner un div div particulier au lieu de la fenêtre entière?
James Smith
40

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);
}
George Filippakos
la source
Il convient probablement de souligner que cela nécessite Underscore.js: underscorejs.org . C'est un très bon point, cependant. L'événement de défilement doit presque toujours être limité pour éviter de graves problèmes de performances.
Jude Osborn
Peut-être que ce n'est que moi et qu'il pourrait utiliser une analyse comparative, mais je n'aime pas l'idée d'invoquer clearTimeout et setTimeout sur chaque événement de défilement. Je voudrais émettre 1 setTimeout et ajouter des gardes dans ce gestionnaire. C'est probablement juste une micro-optimisation (le cas échéant).
Grimace of Despair
Ceci est un ajout vraiment soigné! Je peux penser à une autre amélioration. Actuellement, la fonction qui vérifie la hauteur ne s'exécutera pas si l'utilisateur continue de faire défiler. Si cela pose problème (par exemple, si vous souhaitez déclencher la fonction lorsque l'utilisateur fait défiler à mi-chemin, qu'il continue ou non à défiler), vous pouvez facilement vous assurer que la fonction est effectivement appelée tout en interdisant plusieurs appels pendant l'intervalle choisi. Voici un résumé pour le montrer. gist.github.com/datacarl/7029558
datacarl
Quelle? Invoquer une charge de machinerie pour empêcher un simple calcul? Je ne vois pas du tout comment cela est plus efficace
Rambatino
37

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

Yosi
la source
window.innerHeight avait plus de sens pour ce que j'essayais d'accomplir merci!
Amir5000
Comment obtenir la hauteur restante après le défilement?
OPV
21

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

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

Frederik Witte
la source
17

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.

Talon
la source
Meilleure réponse pour Vanilla js, No jQuery solution. Utilisationvar docElement = document.documentElement; var winElement = window
jperelli
Ceci en 2019. Au lieu de winElement.pageYOffsetvous pouvez également utiliser winElement.scrollY.
Noel Abrahams
15

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

Junaid Qadir
la source
12
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.

Vasyl Gutnyk
la source
1
J'ai fait ce qui suit et travaillé parfaitement. Merci. var shouldScroll = (elem.scrollHeight - elem.scrollTop - elem.clientHeight) == 0;
jiminssy
11

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');
        }
    });
ddanone
la source
J'ai essayé d'utiliser votre solution, cela fonctionne bien mais dans les cas où l'élément a un rembourrage - cela ne fonctionne pas car il calcule la hauteur pure de l'élément, sans inclure de rembourrage, pour résoudre ce problème, j'ai changé cela $(this).scrollTop() + $(this).height() == $(this)[0].scrollHeight=>$(this).scrollTop() + $(this).outerHeight(true) >= $(this)[0].scrollHeight
Taras Chernata
6

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

l2aelba
la source
Parfait. Testé dans Firefox et Chrome
Erlisar Vasquez
J'obtiens l'erreur suivante: 3 arguments attendus, mais 2. Un argument «c» n'a pas été fourni.
Sõber
6

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>

Bakos Bence
la source
4

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

}
Hiren Patel
la source
3

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");
}
Florin Andrei
la source
3

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');
    }
});
Shahrukh Anwar
la source
2

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
}
Yuval A.
la source
essayez Math.floor(element.scrollTop) === element.scrollHeight - element.offsetHeightau cas où le scrollTop est une décimale sans laquelle il ne fonctionnera pasMath.floor()
Michail Michailidis
2

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>

StefansArya
la source
Le problème avec Intersection Observer est que si la fenêtre de démarrage est relativement petite (disons la disposition de base avant de récupérer des images sans barre de défilement), le rappel de l'observateur est déclenché immédiatement. L'auditeur de défilement attend qu'une personne défile. Et la barre de défilement n'apparaîtra pas avant que le premier lot d'images et etc. soit récupéré. Intersection Observer n'est donc pas tout en une seule solution.
Aleks
@Aleks Vous pouvez appeler le .observe(...)sur un écouteur d'événement comme lorsque l'utilisateur survole / touche votre conteneur de défilement afin qu'il ne se déclenche pas immédiatement.
StefansArya
1

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!");
    }
});
hayj
la source
1

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;
Vince Panuccio
la source
0

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";  }
Alexei Zababurin
la source
5
Cela ne répond pas à la question. La question était de savoir comment détecter que les utilisateurs avaient fait défiler la fenêtre jusqu'en bas. Votre code vérifie si un élément particulier est en vue.
Peter Hall
0

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

}

Henrique C.
la source
0

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!");
        }
    });
}
Arun Prasad ES
la source
0

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!");
}
alierdogan7
la source
0

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
 }
 });
GeniusGeek
la source