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

我不知道你用#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>

Answer 2

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

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

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

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

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

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

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

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

2 个答案: