scrollTop（JS 和 jQuery 版本）不会一直滚动到底部答案

【问题标题】：scrollTop (JS and jQuery version) won't scroll all the way to the bottomscrollTop（JS 和 jQuery 版本）不会一直滚动到底部
【发布时间】：2018-03-06 17:53:42
【问题描述】：

我正在创建一个聊天应用程序，当消息加载（来自 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;
}

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

或者...

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

我使用哪个版本或使用什么值似乎并不重要，它只是拒绝将最后大约 5% 的路径滚动到底部。有什么想法我可能做错了吗？

【问题讨论】：

标签： javascript jquery scrolltop

【解决方案1】：

我处理过类似的问题。我从网络套接字接收到一个值以放入聊天框中。每当我使用 scrollTop/Height 时，它总是滚动到最后一条消息的下一条（稍微关闭一点）。即使我输入最大值或非常高的值，它也不会一直滚动。

这发生在容器的尺寸（带有添加的项目）还不是我们所期望的。一个简单的超时就可以解决这个问题：

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

如果您使用的是 Vue.js（可能与其他响应式框架类似），您还可以执行以下操作（“this”是 Vue 实例）：

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

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

编辑：nextTick 似乎并不总是有效。 setTimeout 应该始终有效。

【讨论】：

【解决方案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>

【讨论】：