如何让我的溢出div滚动始终在底部？

Question

我用过

$('.chatroom-upper-container').scrollTop($('.chatroom-upper-container')[0].scrollHeight);

它仅在我发送新消息时才会起作用，滚动将更新到底部，但是如何在加载页面时div滚动总是会下降？

https://jsfiddle.net/729jz8me/

在JsFiddle中，Everthing工作得很好

但在我的页面中，滚动不会在加载页面时到达底部这里是我的页面

当我发送新消息时，滚动会下降，所以我如何使页面加载滚动将到底？

编辑也许我没有说清楚问题。 所以我想要的是当我打开页面时，滚动将位于底部。 现在我可以在发送新消息时转到页面底部但是当我关闭它时再次重新打开页面的滚动将再次排在最前面。 我不确定为什么我的代码不能在JsFiddle的页面上工作

Answer 1

你可以试试下面的jQuery代码： -

$(document).ready(function(){
   setTimeout(function(){
      $('.chatroom-upper-container').scrollTop($('.chatroom-upper-container')[0].scrollHeight);
   }, 500);
});

它可能会帮助你。

Answer 2

我们可以将您的想法与您的想法结合起来

• 使用您的代码在底部开始列表

• 创建一个触发事件的按钮，当用户单击按钮时，滚动到达底部。

因此，当我们第一次启动页面时，列表将位于底部，然后当您发送消息时，列表也将位于底部。

$(document).ready(function(){
   //When page is loaded the first time
   $('.chatroom-upper-container').scrollTop($('.chatroom-upper-container')[0].scrollHeight);
   //Thus when page is loaded, the list started at the top 
   $('.YourSendButton').click(function(){
       $('.chatroom-upper-container').scrollTop($('.chatroom-upper-container')[0].scrollHeight);
   });  
});