Jquery infinite scroll – avec div not scrollbar of body

Supposons que j’ai div et que je veuille récupérer des données et y insérer des données. Lorsque l’utilisateur fait défiler le div, le prochain dataset sera récupéré et poussé dans le div. Comment détecter la position de la barre de défilement avec jQuery? Je ne veux utiliser aucun plugin. J’ai besoin de code jQuery. Voici le lien exemple comme ahttp: //www.stevefenton.co.uk/cmsfiles/assets/File/infinitescroller.html mais il utilisait un plugin.

Que diriez-vous de quelque chose du genre:

$(window).scroll(function() { if($(window).scrollTop() + $(window).height() == $(document).height()) { var new_div = '
'; $('.main_content').append(new_div.load('/path/to/script.php')); } });

Cela appenda un nouvel élément au conteneur de la page principale lorsque la barre de défilement atteindra le bas de la page. Il remplit également ce nouvel élément avec le contenu chargé à partir d’un script externe.

Si vous voulez détecter si un utilisateur a fait défiler vers le bas une div spécifique:

 $('.some_element').bind('scroll', function(){ if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight){ var new_div = '
'; $('.main_content').append(new_div.load('/path/to/script.php')); } });

Ce code a été testé et vérifié comme travaillant. Lorsque vous faites défiler votre div, le code vérifie si le curseur a atteint le bas en comparant la hauteur du curseur à la position du curseur. Si c’est le cas, il appelle une méthode qui obtient plus de contenu et l’ajoute à la div.

Prendre plaisir!

Koby

 $(document).ready(function () { $("div").scroll(function () { var $this = $(this); var height = this.scrollHeight - $this.height(); // Get the height of the div var scroll = $this.scrollTop(); // Get the vertical scroll position var isScrolledToEnd = (scroll >= height); $(".scroll-pos").text(scroll); $(".scroll-height").text(height); if (isScrolledToEnd) { var additionalContent = GetMoreContent(); // Get the additional content $this.append(additionalContent); // Append the additional content } }); });

Selon votre commentaire, voici le code source complet de la page HTML qui fonctionne (testé sous IE 9):

** Assurez-vous de référencer la bibliothèque jquery **

    Test Image      This is the div content
 This is the div content
 This is the div content
 This is the div content
 This is the div content
 This is the div content
 
 Scroll Height:  
 Scroll position:

Je pense que .scrollTop() est votre arme de choix. API jQuery

Obtenir la position verticale actuelle de la barre de défilement pour le premier élément de l’ensemble d’éléments correspondants.

Assurez-vous donc de le lier au bon élément. Directement sur la div devrait fonctionner, je suppose.

La position de défilement vertical est identique au nombre de pixels masqués au-dessus de la zone de défilement. Si la barre de défilement se trouve tout en haut, ou si l’élément ne peut pas défiler, ce nombre sera 0.

Donc, vous devez probablement trouver un moyen de calculer la hauteur de la div comme si elle était étirée sans la barre de défilement pour les mettre en nombres dans une relation significative au tir de l’événement de chargement.