jQuery - scroll div with overflow-y: scroll; - jquery, css3, utilisabilité

J'ai un div qui contient une liste de messages (c’est une application de salle de chat). Chaque message étant ajouté au bas de la liste, je pense Je veux que le div soit fait défiler vers le bas de la page. C'est logique, non? Donc - questions # 1: comment faire en sorte que la div défile vers le bas?

Maintenant, la question suivante concerne un peu la facilité d’utilisation. Que faire si l'utilisateur fait défiler pour lire quelque chose qui a été posté précédemment? Puis, soudain, quelqu'un poste un nouveau message? Cela signifie que jQuery fera défiler à nouveau. Cela peut être très irritant pour l'utilisateur. Quel est le bon moyen de gérer cela? Devrait-il faire défiler vers le bas si la barre de défilement est déjà complètement défilée avant l’ajout d’un nouveau message? Si oui, comment procéder dans jQuery? Ou existe-t-il une solution plus utilisable?

Réponses:

vous pouvez obtenir la position de la barre de défilement par window.pageYOffset et ensuite utiliser window.scrollTo(0, y) faire défiler à un endroit.

ou vous pouvez même utiliser $("#mydiv").scrollTop(newmsg_top) dans jQuery pour faire défiler jusqu'au nouveau message.

où var newmsg_top = parseInt($("#mydiv li:last").offset().top);

ici #mydiv est la div avec tous vos messages.
alors #mydiv li:last pointe sur le dernier message.
offset() renvoie la position actuelle de l'élément par rapport au document et vous pouvez obtenir la première position en .top

Si vous voulez plutôt la position relative par rapport au parent, vous pouvez aller avec position()

MODIFIER : Vous avez un jsfiddle qui travaille ici ici. S'il vous plaît, jetez un oeil.</ strong> Remarque: vous ne descendez que si vous affichez le dernier élément. (Pour résoudre votre problème d'utilisation)

$("#mydiv").append("My data");
var newmsg_top = parseInt($("#mydiv")[0].scrollHeight );
$("#mydiv").scrollTop(newmsg_top);