javascript - 如何使用 Bootstrap 聊天小部件滚动到底部

Question

我正在使用默认折叠的小部件 class="panel-collapse collapse"。当聊天中有多个元素并且打开时，滚动从顶部而不是底部开始(如果默认情况下不折叠，则可以正常工作)。一个例子在 http://www.bestdealadvisors.com , 添加一些元素然后刷新页面。打开小部件时，它从顶部开始。打开时如何从底部开始滚动？

Answer 1

当某些东西折叠时，您应该监听 Bootstrap 触发的事件。有点资料here .然后将聊天窗口滚动到底部。

此脚本必须位于页面末尾(在 bootstrap 和 jQuery 脚本标记之后)

<script>
var panelBody = $("#chat-list")
$('#collapseOne').on('shown.bs.collapse', function () { 
  panelBody.stop().animate({scrollTop:panelBody.prop("scrollHeight")}, '100', 'swing')
})
</script>