Partir du bas dans un objet en overflow: scroll

Ce topic a été résolu
WebScienceYTB

WebScienceYTB Le 16 août 2020 à 22:41

Salut, Je cherche à créer un espace de discussions, dans celui-ci le formulaire pour écrire un message est en bas, et donc les messages les plus récents aussi et donc si on scroll vers le haut on voit les messages plus anciens (basique quoi).

Mon problème est que je ne sais pas du tout comment positionner la barre de scroll en bas par defaut (afin que l'on n'ait pas à scroller jusqu'à tout en bas pour voir les messages les plus récents).

Si vous avez des solutions ça m'aidera beaucoup !

PrimFX

PrimFX Le 17 août 2020 à 01:19

Hello @WebScience !

Je t'ai fait un petit JSFiddle que tu peux retrouver par ici : https://jsfiddle.net/q2jxbz19.

L'idée est qu'à chaque fois qu'un message arrive dans ta "chatbox" (bloc contenant ta discussion), la barre de scroll doit être déplacée au bas de ce bloc. La fonction suivante permet de déplacer le scroll au bas de la div #chatbox :

function scrollToBottom() {
  const el = document.getElementById("chatbox");
    el.scrollTop = el.scrollHeight;
}

Ensuite, il n'y a plus qu'à appeler cette fonction à chaque fois qu'un message arrive dans ta chatbox et le tour est joué 😉

En espérant avoir pu t'aider,

A bientôt,

Boris

Meilleure réponse
WebScienceYTB

WebScienceYTB Le 17 août 2020 à 11:54

Nickel merci je vais essayer ça et je te tiens au courrant ;-)

WebScienceYTB

WebScienceYTB Le 17 août 2020 à 11:59

Ca fonctionne !!

Vous devez être connecté pour poster une réponse. Se connecter ou Créer un compte