webentwicklung-frage-antwort-db.com.de

Wie halte ich eine Bildlaufleiste immer unten?

Ich habe eine Bildlaufleiste in einem div-Element und anfangs ist die Position oben. Wenn ich dem div-Element Text hinzufüge, wird der Bildlauf nicht verschoben. Gibt es eine Möglichkeit, die Bildlaufleiste der Position des div-Elements immer unten zu sein, und wenn ich dem div-Element etwas Text hinzufüge, geht die Bildlaufleiste auch automatisch nach unten.

Hier ist mein div Element: 

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

Und CSS-Klasse

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

Was ich brauche ist, anfangs sollte die Position der Bildlaufleiste unten sein.

Wenn ich auf eine Sende-Nachricht geklickt habe, füge ich die Nachricht den div-Elementen 'messageBody' hinzu. Zu diesem Zeitpunkt sollte die Bildlaufleiste wieder deaktiviert sein.

Dies ist der aktuelle Stil meiner Bildlaufleiste  enter image description here

Und ich möchte, dass es immer so ist  enter image description here

Danke im Voraus.

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

Bitte schön. Folgen Sie diesem Konzept.

$('#messages').scrollTop($('#messages')[0].scrollHeight);
#chatbox-history {
  overflow: none;
  position: relative;
  width: 100%;
  height: 200px;
  border: 1px solid #ccc;
}
#messages {
  overflow: auto;
  position: absolute;
  bottom: 0;
  width: 100%;
  max-height: 200px;
}
#messages div {
  border: 1px solid #e2e4e3;
  margin: 5px;
  padding: 10px;
  background: #fafafa;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="chatbox-history">
  <div id="messages">
    <div>asdjf ;asd</div>
    <div>ajsd fa ;skd f;s</div>
    <div>asdjf ;akjs d;lf a;lksd fj</div>
    <div>ajsd fkaj s;dlf a;ljsdl;fkja;lsd f; asd</div>
    <div>Wassup?</div>
  </div>
</div>
2
Aslam

So etwas sollte tun, was Sie wollen, wenn ich verstanden habe, was Sie richtig wollen.

Ersetzen Sie messageBody in getElementById() durch Ihre Chat-Nachrichtencontainer-ID.

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

Dadurch wird der Nachrichtencontainer nach unten verschoben. Da die Bildlaufposition in Pixel und nicht in Prozent aufgezeichnet wird, ändert sich die Bildlaufposition nicht, wenn Sie standardmäßig weitere Elemente in den Container einfügen.

Tun Sie dies, nachdem Sie eine neue Nachricht in Ihren Chat-Nachrichtencontainer eingefügt haben.

1
josephting

Nehmen Sie Ihren HTML-Code wie folgt an.

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>

Und dann wickeln Sie Ihre Js so ein

JS

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

DEMO

0
Fiido93