3

标题解释了我的问题。所以这是我的代码：

$("#my-div ul").scrollTop($("#my-div ul")[0].scrollHeight);

#my-div 使用 AJAX 填充。所以在我的 ajax 请求中，我有一个执行上述代码的成功回调：

$.ajax({
    url: 'getLog.php',
    data: {'logFile': 'log.php'}, // echo "<ul> A BUNCH OF <li>s here </ul>"
    success: function(data){
        $("#my-div").html(data);
        // console.log($("#my-div ul")[0].scrollHeight); // Debugging Purposes
        $("#my-div ul").scrollTop($("#my-div ul")[0].scrollHeight);
    }
});

我继续并控制台记录了 $("#my-div ul")[0].scrollHeight （正如您在代码中看到的），以查看它在执行 .scrollTop() 之前是否知道 scrollHeight 并且它有效（它显示 720然后我增加了日志文件的大小，然后我刷新，它显示830）

令人惊讶的是，当我进入控制台（Chrome）并输入

$("#my-div ul").scrollTop($("#my-div ul")[0].scrollHeight);

它完美地工作，并且 ul 一直滚动到底部！

我不知道为什么它不起作用...... :(

4

1 回答 1

5

浏览器不会在 HTML 更改时重新呈现所有内容，总会有一个小间隙。如果没有间隙，javascript 执行将阻止浏览器并且用户无法使用您的页面（如预期的那样）。<-这可能是原因:)

你可以试试：

$.ajax({
url: 'getLog.php',
data: {'logFile': 'log.php'}, // echo "<ul> A BUNCH OF <li>s here </ul>"
success: function(data){
    $("#my-div").html(data);
    // console.log($("#my-div ul")[0].scrollHeight); // Debugging Purposes
    setTimeout(function() {
       $("#my-div ul").scrollTop($("#my-div ul")[0].scrollHeight);
    }, 10);
}
});

如果这是问题所在，您还可以尝试将 setTimeout 内的时间降低到 0 - 它不会是 0，而是每个浏览器设置的最短时间。

于 2013-07-10T19:11:05.203 回答