3

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

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

4

2 回答 2

2

// this is 将滚动到末尾，在 append 之后

$("#mydiv").append("My data");
var newmsg_top = parseInt($('#mydiv')[0].scrollHeight );
$('#mydiv').scrollTop(newmsg_top);
于 2014-07-13T11:40:56.403 回答
2

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

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

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

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

如果你想要相对于父母的相对位置，你可以选择position()

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

于 2012-06-20T11:05:00.573 回答