jQuery - 使用 overflow-y 滚动 div：滚动；答案

【问题标题】：jQuery - scroll div with overflow-y: scroll;jQuery - 使用 overflow-y 滚动 div：滚动；
【发布时间】：2012-06-20 10:59:49
【问题描述】：

我有一个包含消息列表的 div（它是一个聊天室应用程序）。由于每条消息都添加到列表底部，我认为我希望将 div 滚动到页面底部。这是有道理的，对吧？所以 - 问题 #1：如何让 div 滚动到底部？

现在，下一个问题是关于可用性的。如果用户向上滚动阅读之前发布的内容怎么办？然后突然有人发了一条新消息？这意味着 jQuery 将再次向下滚动。这对用户来说可能非常烦人。有什么好的方法来处理这个？如果在添加新消息之前滚动条已经一直向下滚动，它是否应该只向下滚动？如果是这样，如何在 jQuery 中做到这一点？还是有更实用的解决方案？

【问题讨论】：

标签： jquery css usability

【解决方案1】：

您可以通过window.pageYOffset 获取滚动条的位置，然后使用window.scrollTo(0, y) 滚动到某个位置。

或者您甚至可以在 jquery 中使用$('#mydiv').scrollTop(newmsg_top) 向下滚动到新消息。

在哪里var newmsg_top = parseInt($('#mydiv li:last').offset().top);

#mydiv 是包含所有消息的 div。
所以#mydiv li:last指向最后一条消息。
offset()返回元素相对于文档的当前位置，您可以通过.top获取顶部位置

如果你想要相对于父级的相对位置，你可以使用position()

编辑： 有一个 jsfiddle 在这里工作 here。请看一看。 注意：只有在查看最后一个元素时才下线。（用于解决您的可用性问题）

【讨论】：

对不起，我不知道“新消息的顶部偏移量”是什么或如何获取它。
我已经编辑了一点，看看你能不能让它工作..否则我会尝试输入整个代码块:)
好的，我知道了如何使用scrollTop。可用性问题呢？当你向上滚动阅读内容时，如果它一直滚动到底部，你不觉得会很烦人吗？
您应该使用 window.pageYOffset 检查窗口的 Y 偏移量，如果它等于您当前最后一条消息的 y 偏移量，则用户位于底部，您可以继续并向下滚动
window 怎么知道它指的是消息的包含 div？而不是自己做这个 - 有没有一个插件？

【解决方案2】：

//这是将滚动到末尾，追加后

$("#mydiv").append("My data");
var newmsg_top = parseInt($('#mydiv')[0].scrollHeight );
$('#mydiv').scrollTop(newmsg_top);

【讨论】：