Aligner le texte avec le bas lorsqu'il entre pendant une conversation?

Question

Je suis en train de créer une application de messagerie Web personnalisée, et même si les bases ont été élaborées, je me demandais si c'était possible ... en ce moment, le chat arrive en haut de la div, et quand atteint le fond, le div commence à défiler. Cela marche. C'est bien. Mais je me demandais s'il était possible de le créer plus comme un client IRC, où le chat arrive initialement au en bas du div, alors chaque nouvelle ligne entre en dessous des anciennes, etc, et encore, quand le div est plein, il commence à défiler.

J'ai réussi à obtenir une partie de ce travail: je peux l'afficher de cette façon. Mais je ne peux pas trouver un moyen de le faire défiler; soit le défilement n'apparaît pas (quand il n'y a pas de débordement sur le div intérieur, malgré un débordement sur le div conteneur externe), ou il est limité à la largeur du texte plutôt qu'à la largeur du conteneur div.

Quelques options que j'ai essayé:

<div id="chatbox" style="overflow: auto; position: relative; width: 100%; height: 400px;"> 
<div id="chatmessages" style="overflow: auto; position: absolute; bottom: 0;"></div></div> 

Cela a le texte apparaissent correctement en bas, mais pas scrollbar jamais apparaît.

<div id="chatbox" style="overflow: auto; position: relative; width: 100%; height: 400px;"> 
<div id="chatmessages" style="overflow: scroll; position: absolute; bottom: 0;"></div></div> 

Cela a le texte semble bien au fond, et une barre de défilement apparaît, mais il n'y a que jamais aussi large que le texte, même si la largeur = 100% ... et lorsque le texte atteint le sommet, la barre de défilement reste grise.

Fondamentalement, est-ce que je veux la barre de défilement sur le div interne ou le conteneur, est-ce encore possible, comment puis-je le forcer à travailler, et vais-je tout à fait faux?

Answer 1

Les barres de défilement ne sont pas activées car chatmessages ne cesse de grandir.

Utilisez ces styles:

#chatbox 
    { 
     overflow: none; 
     position: relative; 
     width:  100%; 
     height:  400px; 
    } 
    #chatmessages 
    { 
     overflow: auto; 
     position: absolute; 
     bottom:  0; 
     max-height: 400px; 
    } 

Answer 2

Utilisez ce jquery pour le défilement vers le bas, il affiche toujours le dernier message:

$('#chatmessages').scrollTop($('#chatmessages')[0].scrollHeight); 

Pour utiliser #chatmessages largeur: 100% et maxi- hauteur identique à la hauteur de #chatbox

#chatbox { 
    overflow: none; 
    position: relative; 
    width:  100%; 
    height:  200px; 
    border:  1px solid #ccc; 
} 
#chatmessages 
{ 
    overflow: auto; 
    position: absolute; 
    bottom:  0; 
    width:  100%; 
    max-height: 200px; 
} 

J'ai créé ces fiddles avec des exemples de messages texte:

jsfiddle with scroll

jsfiddle without scroll

Answer 3

je suis venu avec une solution qui ne nécessite pas javascript, ce qui signifie qu'il fonctionne plus rapidement. Lorsque vous faites défiler la discussion vers le bas, il y a juste de nombreuses variables à surveiller, par exemple des images qui sont en train de charger et de modifier la hauteur de défilement.

Dans ma solution proposée, le chat est tourné de 180 degrés dans une enveloppe déroulante. A l'intérieur de l'emballage, vous avez une autre div qui est tournée de 180 degrés. De cette façon, la div intérieure flotte naturellement vers le bas, même lorsque de nouveaux messages apparaissent.

<div id="chat_wrap" class="scrollable" style="transform-origin: 50% 50%; transform: rotate(180deg);" onscroll="reverseScroll()"> 
    <div id="messages_wrap" style="float: left;width: 100%; transform: rotate(180deg);"> 
     <div class="message">Your message</div> 
    </div> 
</div> 

Side note, mon "chat_wrap" div a une position absolue avec haut/bas/gauche/droite pour tenir ensemble où il est censé.