Comment script «Endless Document» (comme Skittles.com)

Question

Comment ont-ils accompli cela? Avez-vous les gars vus: http://www.skittles.com? Le site ne finit jamais!

Answer 1

Eh bien, voici une façon de le faire:

$(document).ready(
    function(){ 
    $(window).scroll(
     function(){ 
      if ($(window).scrollTop() + $(window).height() >= $(document).height()) { 
       $('div').clone().appendTo('body'); 
      } 
     } 
     ); 
    } 
    ); 

Avec l'JS Fiddle demo nécessaire. Gardez à l'esprit que tout contenu interactif qui est cloné/ajouté/inséré dynamiquement nécessitera un type live() ou delegate() pour interagir avec jQuery.

Cela dit, il y a des mises en garde:

1. scrolling infini est pas nécessairement une aide agréable de navigation, en particulier si l'utilisateur est susceptible de vouloir voir une partie de la moitié du contenu en bas d'une page infinie.
2. Il arrive un moment où un navigateur va tomber en panne ou devenir léthargique/ne répond pas en raison du volume de contenu qu'il est nécessaire de maintenir en mémoire.