Charger le contenu en tant qu'élément défile dans la vue

J'ai une liste de résultats de recherche dans un élément <div> avec une hauteur statique et un overflow: auto; Dans le style. Je voudrais charger uniquement le premier x nombre de résultats de recherche (p. Ex. 20) et charger d'autres résultats X lorsque l'utilisateur se déplace au bas de l'élément contenant les résultats de la recherche.

Quelqu'un peut-il m'expliquer comment je ferais cela? J'ai trouvé quelques exemples, mais tous utilisent la valeur de défilement de l'intégralité du document, pas un seul <div> . J'utilise jQuery, si cela compte.

Il me semble que vous souhaitez détecter la position des barres de défilement lorsqu'il est près de la fin. Trouvé cela en parcourant le groupe jquery. Sa solution proposée avec un peu de documentation supplémentaire si nécessaire:

 $.fn.isNearTheEnd = function() { // remember inside of $.fn.whatever = function() {} // this is the jQuery object the function is called on. // this[0] is DOMElement return this[0].scrollTop + this.height() >= this[0].scrollHeight; }; // an example. $("#content").bind("scroll", function() { if ($(this).isNearTheEnd()) // load some content }); 

Si vous comparez le .top() + .height() de la .scrollTop + .height la .scrollTop + .height la .scrollTop + .height alors vous pouvez dire quand vous êtes au bas de cette div, puis déclencher le prochain chargement de contenu …