如何让滚动条始终保持底部？ [英] How to keep a scrollbar always bottom?

问题描述

我在div元素中有一个滚动条，最初它的位置是顶部。每当我添加一些文本到div元素，那么滚动条不会移动。有什么办法，div元素的位置的滚动条总是最下面，每当​​我添加一些文本到div元素，滚动条也自动到底部？

这是我的div元素：

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

和CSS class

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

我需要的是，最初滚动条的位置应该是底部。

另外，当我点击发送消息时，我将消息添加到div元素的messageBody中。

这是我的滚动条的当前样式

我希望它总是

提前致谢。

解决方案

  var messageBody = document。 querySelector（ '＃消息体'）; 
 messageBody.scrollTop = messageBody.scrollHeight  -  messageBody.clientHeight; 
  

I have a scroll-bar in a div element and initially it's position is top. Whenever i add some text to the div element then the scroll-bar does not move. Is there any way, the scroll-bar of the div element's position will be always bottom and whenever I add some text to the div element, the scroll-bar also goes to the bottom automatically?

Here's my div element:

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

And CSS class

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

What i need is, initially the position of the scroll-bar should be bottom.

Also when i clicked a send message, I'm adding the message to the div elements 'messageBody'. On that time the the scroll-bar should be down again.

This is the current style of my scroll-bar

And I want it to be always

Thanks in advance.

解决方案

var messageBody = document.querySelector('#messageBody');
messageBody.scrollTop = messageBody.scrollHeight - messageBody.clientHeight;

这篇关于如何让滚动条始终保持底部？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！