Infini défilement à l'intérieur d'un div avec AJAX (jQuery) chargé de la date
j'ai essayé de comprendre cela sur plusieurs questions ici, donc, trouver les différentes pièces et ensuite les assembler, mais maintenant je renonce.
Ce que j'essaie de faire:
l'utilisateur est sur une page, clique sur un bouton et une liste de contenu se charge dans une div en utilisant jQuerys .Ajax. Quand il ou elle défile vers le bas de la div, charger plus de contenu. Comme vu sur Twitter, mais c'est à l'intérieur d'une div.
j'ai vu des exemples sur la façon d'avoir un infini chargement dans scroll, mais le problème est que ces exemples rechargent la page entière (il semble)
quiconque A une idée de comment je peux faire cela?
comme je l'ai dit, Je ne peux pas accomplir ceci en utilisant des moyens normaux.
la page est construite comme:
Page 1, a un div vide jusqu'à ce que l'utilisateur clique sur un bouton.
Page 2 charge beaucoup de contenu. Lorsque l'utilisateur clique sur le bouton de la page 1, cela est chargé dans le div.
quand l'utilisateur scrolls à travers le div (il a débordement réglé à auto) et se termine au bas du div il devrait charger la page suivante ou ainsi pour parler.
Merci d'avance! :)
4 réponses
il y a quelques plugins qui font très bien cela pour vous.
http://www.webdeveloperjuice.com/2010/02/24/create-infinte-scroll-effect-using-jquery-with-demo/
http://www.beyondcoding.com/2009/01/15/release-jquery-plugin-endless-scroll/
EDIT: un peu plus à jour plugins:
https://github.com/fredwu/jquery-endless-scroll
http://www.infinite-scroll.com/infinite-scroll-jquery-plugin/
JQuery.charger() méthode pour saisir du contenu html et ensuite l'insérer dans un élément html.
C'est un petit guide sur la façon de développer vous êtes propre rouleau infini avec ajax et jquery. http://dumpk.com/2013/06/02/how-to-create-infinite-scroll-with-ajax-on-jquery/
si vous utilisez le rouleau infini de Paul Irish, vous pouvez juste spécifier un liant comme l'un des arguments où vous avez implémenté le rouleau infini, juste comme ceci:
$('.mydiv').infinitescroll({
binder: $(".name-of-div")
le classeur est défini à la fenêtre du document par défaut, mais si vous le spécifiez, vous pouvez avoir infinite scroll courant simplement à l'intérieur d'un div sur votre page