javascript - 滚动到 div 的底部

Question

我在使用 jQuery 将 div 滚动到底部时遇到问题。

分区

HTML:

<div id="chatbox"></div>

CSS:

    #chatbox {
    width:300px;
    height:400px;
    background:grey;
    overflow-x:hidden;
    overflow-y:auto;
    border-radius: 10px;
    background: #045671;
}

当我使用 onclick -> $("#chatbox").scrollTop(9999) 滚动到底部时，再次单击滚动向上 +20px 后出现问题。

示例:http://46.238.10.232:10001/chat/

Answer 1

如果过度设置scrollTop ，魔法会发生(或不会发生，取决于您的期望)。将 scrollTop 设置为 9999 会将 scrollTop 设置为 0 到 9999 之间的任何数字，具体取决于需要。您还可以阅读 scrollTop，因此将其设置为x 并不意味着它将保持x，它会是实际位置，因此如果您有兴趣查询该值，它仍然有意义。

如果元素的内容发生变化，您将不得不重新设置 scrollTop。通常给scrollHeight总是足够的(是的，您可以尝试完美准确地计算 scrollTop，但为什么要麻烦呢？让浏览器进行计算，然后重新开始工作)。

所以我想，当您“再次点击”(无论是什么)时，您正在向聊天框添加更多内容。是的？然后你必须设置 scrollTop，再次!

---

如果您每次都设置scrollTop，那么您可能做得太早了。您应该在修改元素的内容之后执行此操作，而不是仅仅响应 onclick 事件。