Salut a tous.
Voila j'ai fai une chatbox grace au tuto sur php/mysql.
mais au lieu de mettre le formulaire en haut je l'ai mis en bas comme sur msn.
Donc le dernier message est affiché tout en bas.
et donc j'aimerais que la scrollbar soit par defaut en bas.j'ai essayé avec les ancres mais sa marche pas.Aidez moi s'il vous plait.
Merci d'avance

element = document.getElementById('ton_element_avec_scroll');
element.scrollTop = element.scrollHeight;

A appeler à chaque fois que tu veux remettre la scrollBar en bas...

bah sa marche pas!!
une autre idée?

EDIT: Ca marche!
Merci a vous.
Sinon comment sa marche ce code?

T'as bien changé ton_element_avec_scroll par l'id de ton bloc ?

Cette solution fonctionne. C'est toi qui l'utilise mal.

Montre précisément comment tu l'as utilisée.

En fait j'avais mis le code tout au debu avant meme le chargement de la page..
J'ai corrigé ma faute .
Sinon..comment fonctionne ce bout de code?

element = document.getElementById('ton_element_avec_scroll');
element.scrollTop = element.scrollHeight;
Première ligne : récupère l'élément.
Deuxième partie : Met le haut du scroll à la hauteur totale du scroll. => Met tout en bas quoi
En gros, c'est ça

scrollHeight représente la hauteur totale de ton élément.

scrollTop représente la position à partir du haut.

Donc si tu mets le scrollTop à scrollHeight, tu seras au plus bas possible. (même trop bas, mais JS corrige tout seul)

OK merci a vous

Bonjour!
Je déterre ce sujet car je souhaiterais la meme chose sur ce bout de code (obliger le scroll à être en bas de base) :

<iframe 
src="http://www.visiometeo.com/images/cartes_meteo/meteoaccueilmini1.php" 
frameborder="0"  height="219" scrolling="yes" width="434">
</iframe>

Grand merci!!

Hello !!!

<iframe id="frame_1"
src="http://www.visiometeo.com/images/cartes_meteo/meteoaccueilmini1.php" 
frameborder="0"  height="219" scrolling="yes" width="434">
</iframe>
<script>
document.getElementById('frame_1').scrollTop = document.getElementById('frame_1').scrollHeight;
</script>

Voili voilou

Merci Sephiran ta solution marche parfaitement pour moi!

Je déterre ce vieux sujet car c'est l'un des premiers sur lequel on tombe en recherchent une solution à ce problème.

Je poste ce qui me semble une autre solution.

Je cherché la solution à ce problème alors qu'en faite mon ascenseur est bien en bas par défaut

j'ai donc voulu comprendre ...

Effectivement j’agence mes messages de chat de bas en haut avec un "flex-direction:column-reverse" (je ne sais pas si c'est bien )  et a priori cela gère le scrolling  

Mon ascenseur et comme il le faut, en bas du <ol> après actualisation de la page .

Voila voila si ça peut aider .

-
Edité par le_liquideur 5 juillet 2019 à 13:28:53

Bonjour, je déterre moi aussi ce vieux sujet pour proposer une solution, même si elle ne marche que dans le cas d'une messagerie.

Si on veut que les messages les plus récents soient en bas, on voudra aussi très surement que le formulaire d'envoi de nouveau messages le soit aussi. column-reverse ne suffit pas pour moi, l'ordre est bien inversé mais quand je charge la page je suis toujours en haut de la barre de défilement. 

Solution toute bête : mettez l'option "autofocus" sur votre formulaire de texte pour envoyer un message, cela mettra le curseur dessus par défaut au chargement de la page et entraînera automatiquement le défilement de la barre de scroll (comme le formulaire est en bas). L'autofocus n'est pas très gênant car de toute facon le visiteur aurai fini par cliquer sur le formulaire