Défilement infini pour un nombre fixe d’éléments li à l’aide de jQuery

J’ai souvent vu défiler à l’infini, mais il appelle en fait un appel ajax vers la page suivante et l’affiche lorsque la fenêtre atteint un certain seuil.

J’ai affaire à du code HTML contenant 100 éléments li légers déjà chargés sur la page, mais pour les besoins de l’interface utilisateur, nous souhaitons charger paresseux les divs au fur et à mesure de leur défilement au lieu de les afficher tous en même temps. La structure de base ressemble à ceci:

 
  • one
  • two
  • three
  • four
  • five
  • six
  • seven
  • .... 100 times

Si quelqu’un pouvait me suggérer le moyen le plus simple de réaliser cette fonctionnalité jQuery.

Ok, finalement cela fonctionne comme indiqué dans ce JSFIDDLE

 //initialize winHeight = $(window).height(); liHeight = $('li.element').height(); next = Math.ceil(winHeight / liHeight); ulLength = $('li.element').length; $('html, body').animate({ scrollTop: 0}, 0); //hide elements not in the view as the page load for the first time $('li.element').each(function () { if ($(this).offset().top > winHeight) { $(this).fadeOut(0); } }); //show elements on scroll $(window).scroll(function (event) { scrollPos = $(window).scrollTop(); if (scrollPos + winHeight == $(document).height()) { $('#li' + next).fadeIn(); next++; } }); 
 * { padding:0; margin:0; } .container { padding:0; list-style-type:none; } li.element { height:100px; background-color:#BBB; border-bottom:1px dotted gray; font-size:3em; padding-top:10px; text-align:center; color:#444; text-shadow:#222 0 1px 1px; } 
  
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • and so on till 100