Jquery .scrollTop()无效

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执行将阻止浏览器,用户无法使用您的页面(按预期).< - 这可能是原因:)

你可以试试:

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