Question

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

$("#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（正如你在代码中看到的），看它是否在执行之前知道scrollHeight .scrollTop（）并且它有效（它显示720然后我增加了日志文件的大小，然后我刷新，它显示830）

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

时

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

它完美无缺，ul一直滚动到底部！

我无法弄清楚为什么它不起作用...... :(

Answer 1

浏览器在HTML更改时不会重新呈现所有内容，总是有一个小的差距。如果没有间隙，javascript执行将阻止浏览器，用户无法使用您的页面（按预期）。＆lt; - 这可能是原因：）

您可以尝试：

$.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，而是每个浏览器设置的最短时间。

Jquery .scrollTop（）无效

1 个答案: