scrollTop (JS和jQuery版本)不会一直滚动到底部

Question

我正在创建一个聊天应用程序，当消息加载时(从Firebase)，包含消息的div滚动到底部以显示最新的附加消息div。scrollTop确实有点工作，但是它不会一直滚动到底部，不管我为scrollTop使用了什么值。我已经尝试过JS和jQuery版本的scrollTop，但两者都无法将其滚动到底部。下面是我的一些代码: HTML

<div id="msgContainer">
   <div id="msgFeed">
      //Messages load here from a database
   </div>
</div>

CSS

#msgContainer {
  height: 165px;
  overflow-x: hidden;
  overflow-y: visible;
}
#msgFeed {
  display: block;
  background-color: white;
  position: relative;
  margin: 0;
  overflow: hidden;
}

JS

function scrollToBottom (id) {
   var div = document.getElementById(id);
   div.scrollTop = div.scrollHeight - div.clientHeight;
}

或者..。

$('#scroll').scrollTop(1000000);

似乎不重要的是，哪个版本或价值，我使用，它只是拒绝滚动大约5%的方式到底部。知道我做错了什么吗？？

Answer 1

我处理了一个类似的问题。我从一个网络套接字中接收到一个值，然后放到一个聊天框中。每当我使用滚动顶/高度时，它总是滚动到最后一条消息的旁边(只关闭一点点)。即使我输入了最大值或很高的值，它也不会一直滚动。

这就发生了b/c容器的尺寸(加上添加的项)还不是我们所期望的。一个简单的超时将解决这个问题：

setTimeout(() => {
    el.scrollTop = el.scrollHeight;
}, 500); 

如果您使用的是Vue.js (在其他反应性框架中可能有些错误)，您还可以执行以下操作(这是Vue实例)：

this.$nextTick(
    () => (this.$refs.chat.scrollTop = this.$refs.chat.scrollHeight)
); 

“nextTick”似乎是最佳选择，但并不是每个人都会使用Vue。希望这一切都能帮助别人解决这个简单但不那么明显的问题。

编辑: nextTick似乎并不总是起作用。setTimeout应该总是有效的。

Answer 2

我不知道您用#scroll指的是什么元素，因为我在您的html中没有看到它，但是尝试一下，如果它还差5%，请告诉我。

​

$(document).ready(function(){
function scrollToBottom (id) {
    var div = document.getElementById(id);
   
    /*TRY*/
    div.scrollTop = div.scrollHeight - div.clientHeight;
    /*OR*/
    $('#'+id).scrollTop(div.scrollHeight - div.clientHeight);
}
scrollToBottom('msgContainer');

});

#msgContainer {
  height: 165px;
  overflow-x: hidden;
  overflow-y: visible;
  border: 3px solid red
}
#msgFeed {
  display: block;
  background-color: white;
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid blue
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="msgContainer">
   <div id="msgFeed">
      <br><br><br><br><br><br><br><br><br><br><br><br><br>
      <br><br><br><br><br><br><br><br><br><br><br><br><br>
      <br><br><br><br><br><br><br><br><br><br><br><br><br>
      <br><br><br><br><br><br><br><br><br><br><br><br><br>
      <br><br><br><br><br><br><br><br><br><br><br><br><br>
      //Messages load here from a database
   </div>
</div>

​