web-dev-qa-db-fra.com

Comment garder une barre de défilement toujours en bas?

J'ai une barre de défilement dans un élément div et sa position initiale est top. Chaque fois que j'ajoute du texte à l'élément div, la barre de défilement ne bouge pas. Y at-il un moyen, la barre de défilement de la position de l'élément div sera toujours en bas et chaque fois que j'ajouterai du texte à l'élément div, la barre de défilement ira également vers le bas automatiquement?

Voici mon élément div: 

<div class='panel-Body scroll' id='messageBody'></div>

Et classe CSS

.scroll {
            height: 450px;
            overflow: scroll;  
        }

Ce dont j'ai besoin, c’est d’abord la position de la barre de défilement en bas.

De plus, quand j'ai cliqué sur un message d'envoi, j'ajoute le message au messageBody des éléments div. À ce moment, la barre de défilement devrait être à nouveau en bas.

C'est le style actuel de ma barre de défilement  enter image description here

Et je veux que ce soit toujours  enter image description here

Merci d'avance.

javascriptjqueryhtmlcss
7
Shams Nahid
var messageBody = document.querySelector('#messageBody');
messageBody.scrollTop = messageBody.scrollHeight - messageBody.clientHeight;
10
Janet Wu

Quelque chose comme cela devrait faire ce que vous voulez si j'ai bien compris ce que vous voulez.

Remplacez messageBody dans getElementById() par votre identifiant de conteneur de messages de discussion.

var chatHistory = document.getElementById("messageBody");
chatHistory.scrollTop = chatHistory.scrollHeight;

Cela fera défiler le conteneur de messages vers le bas .. .. La position de défilement étant enregistrée en pixels et non en pourcentage, la position de défilement ne change pas lorsque vous ajoutez plus d'éléments au conteneur par défaut.

Faites cela après avoir ajouté un nouveau message dans votre conteneur de messages de discussion.

1
josephting

Supposons que votre code HTML ressemble à ceci.

HTML

<div id="parentDiv">
  <div class="people">1</div>
  <div class="people">2</div>
  <div class="people">3</div>
  <div class="people">4</div>
  <div class="people">5</div>
  <div class="people">6</div>
  <div class="people">7</div>
  <div class="people">8</div>
  <div class="people">9</div>
</div>

Et puis envelopper votre js comme ça

JS

var objDiv = document.getElementById("parentDiv");
objDiv.scrollTop = objDiv.scrollHeight;

DEMO

0
Fiido93