javascript - jQuery的scrollTop在页面加载时不起作用

Question

我有一个基于聊天的系统，正在使用 jQuery/AJAX 在 MVC 框架中构建。当页面加载时，它会用数据库中的最后 x 个响应填充聊天窗口。

我到处寻找答案，但找不到任何相关内容。我尝试过的所有替代方案都无法解决问题。

我使用此功能向下滚动到聊天窗口的底部；

function scrollToBottom()
{
    var panel = $('.panel-body#main-window');
    panel.scrollTop(panel.height());
}

这是我的 CSS:

.panel-body#main-window
{
    overflow-y: scroll;
    height: 550px;
    width: 100%
}

当我将其绑定(bind)到 onClick 处理函数时，效果很好，但无论我尝试什么，它都不会在 $(document).ready 结束之前滚动到面板底部(); 调用。因此，当加载页面时，它不会滚动到容器的底部。

在 Firefox 和 Chrome 中都尝试过此操作，但都不起作用。我的函数正在被调用，但是当它在 $(document).ready(); 内调用时，它拒绝滚动到面板底部。

这个功能我也试过了，也是不行；

$(window).on('load', function(){
    setTimeout(scrollToBottom(), 500);

});

Answer 1

您没有将函数的引用传递给 setTimeout，我认为应该如下所示:

$(window).on('load', function(){
    setTimeout(scrollToBottom, 500);
});

按照您的方式，一旦该代码被评估，函数scrollToBottom就会被执行。