Est-il possible d'écrire un javascript "Infinite Scroll" qui peut gérer le bouton arrière?

Allez ici: http://www.infinite-scroll.com/ Jouez avec le défilement infini. Notez que vous ne pouvez pas cliquer sur un lien, puis activer "retour". Il a des problèmes lorsque vous faites cela.

Donc, j'ai l'intention d'écrire mon propre rouleau Infinite.

  • Lorsque l'utilisateur arrive en bas, chargez un appel AJAX. Ensuite, faites un JQuery "ajouter" le résultat à la div. Ensuite, appelez mes autres fonctions sur ces éléments. (Je définis les images d'arrière-plan de tous ces éléments sous javascript).

Cela fonctionnera-t-il? Si je le fais, puis-je pouvoir gérer le bouton arrière?

J'ai considéré la même chose sur un projet sur lequel j'ai travaillé. Une option sur laquelle j'ai pensé était de permettre au bouton arrière de retourner à l'endroit où le lien a été cliqué (tout comme la navigation normale).

Tout d'abord, vous devez enregistrer la page de l'enroulement infini pour que vous puissiez charger cette section à nouveau. Vous pouvez le faire avec un peu de jeu intelligent avec la valeur window.location.hash . Si vous regardez ma réponse à cette question , j'explique plus en détail comment le faire en JavaScript simple ou jQuery en utilisant le plugin d'adresse Asual .

La partie fondamentale de ce serait comme ceci:

 // Whatever you're using to load the next page function scrollToNextPage(page){ // Your infinite scrolling stuff $.address.parameter("currentPage", page); } $.address.externalChange(function(){ var page = $.address.parameter("currentPage"), top = $.address.parameter("linkTop"); loadAjaxUpTo(page); $('html, body').animate({ scrollTop: top }, 500); }); // Set a parameter for the location of a clicked link $("a").live('click', function(){ $.address.parameter("linkTop", $(this).scrollTop()); }); 

Je n'ai pas mis en œuvre le dernier bit (la position du lien a été cliquée) mais je ne vois pas pourquoi cela ne fonctionnerait pas. Cela entraînerait que la fenêtre se défile très bien vers l'endroit où vous êtes. Vous pouvez toujours le définir avec une ancre à la page chargée à la place (mais lorsque vous vous déplacez vers elle, elle va toujours au haut de la page).

Un certain nombre de points, je ne le recommanderais pas . Au moins pour le projet que je faisais, ce n'était pas vraiment nécessaire. Dans mon projet, nous nous attendions à ce que l'utilisateur recommence à modifier ses options et a pensé que ce défilement ne constituerait pas un problème (même si nous n'avions pas beaucoup de pages à parcourir). L'AJAX (et votre JavaScript pour définir les images) doivent être chargés et exécutés à nouveau, ce qui prend beaucoup de temps en fonction du nombre de pages dont vous avez besoin de recharger. En haut du temps pour faire défiler vers le lien (vous pourriez simplement window.scrollTo mais vous ne recevez pas d'animation, donc tout est très terne. Vous pouvez toujours charger la page sur la personne et oublier les pages précédentes, mais vous Je suis encore en train de rompre l'expérience de l'utilisateur de cette façon. Ou (ce que j'ai essayé) était de mettre en œuvre un défilement infinie bidirectionnel. Donc, il chargeait la page dont l'utilisateur a cliqué et prepend les pages précédentes si elles défilent – ce fut trop de travail Pour ce qui était cependant.

Un autre point est que, si vous le vouliez toujours, vous souhaitez utiliser une demande GET pour obtenir vos pages (et assurez-vous que le cache n'est pas configuré pour expirer immédiatement). J'ai trouvé que les pages demandées par Ajax avec la requête GET prendraient du cache (au moins sur certains des navigateurs que j'ai essayé). L'envoi de vos informations sur un POST ignorera toujours le cache.

La seule façon de gérer le bouton arrière est de modifier le hash de localisation (le bit après le symbole #). La manipulation des boutons arrière et avant peut se faire de deux façons:

  1. Ayez un <a name="bookmark1"></a> qui est unique à chaque section ajoutée et modifiez l'emplacement.hyp pour l'associer.
  2. Utilisez un setInterval avec peu de temps comme 100ms pour regarder l'emplacement. setInterval les modifications et accédez à la partie requise de la page. Vous devez le faire car vous ne pouvez pas réellement détecter quand les boutons arrière / avant sont cliqués.

Il s'agit d'une implémentation de la deuxième méthode pour vous montrer comment cela fonctionne. Dans ce cas, chaque demande ajax contient <a name="ajax-section-1"></a> et ajax-section-2 etc.

 function addToBottom(htmlToAdd) { $('#main-div').append(htmlToAdd); window.location.hash = $('#main-div a[name^=ajax-section-]').last().attr('name'); }