jQuery scrollTop 函数在 ajax 调用后不起作用

Question

这是我的 ajax 调用...工作正常，但 Jquery 的 scrollTo 插件没有将内容定位在我想要的位置。下面

 //this will show the contents of the email body when the list item is clicked.
    jQuery("#list-item-"+username+"").click(function(){

        jQuery(".reply-to-container").hide();
        jQuery("#reply-to-"+username+"").toggle("slide", {direction: 'up'});
        jQuery("#reply-input-"+username+"").val('');
        jQuery(".display-reply-content").html("");
        jQuery("#send-btn-ajax-"+username+"").hide();
        jQuery("#reply-input-"+username+"").hide("slide", {direction: 'up'});


        var myUsername = getUrlVars()['username'];
        var messageID = <?php echo $this->message_id; ?>;
        var dataString = 'messageID='+ messageID + '&friend=' + username + '&myUsername=' + myUsername;

        $.ajax({
            type: "POST",
            url: "/friends/mark-read/", 
            data: dataString,
            cache: false,
            success: function(html)
            {    
                jQuery("#mail-icon-"+username+"").replaceWith("<div id='mail-icon-"+username+"' class='ui-icon ui-icon-mail-open mail-closed'>");
                jQuery("#display-reply-"+username+"").css({"display" : "none"}).html(html).fadeIn(2500);
                console.log(jQuery("#display-reply-"+username+"")[0].scrollHeight);
                jQuery("#display-reply-"+username+"").scrollTop(jQuery("#display-reply-"+username+"").scrollHeight);

            },
            error: function(jqXHR, textStatus, errorThrown) 
            {
                console.log(textStatus, errorThrown);
            }
        }) 
    })

这是我的 Div 的 CSS

.display-reply-content{
    max-height: 200px;
    overflow: auto; 
    }

Answer 1

我认为你需要改变内容滚动到容器高度的位置:

var $content = jQuery(".display-reply-content");
$content.scrollTop($content[0].scrollHeight);

尝试向您的 AJAX 调用添加一个错误函数来处理任何错误:

$.ajax({
        type: "POST",
        url: "/friends/mark-read/", 
        data: dataString,
        cache: false,
        success: function(html)
        {    
            //...
        },
error: function(jqXHR, textStatus, errorThrown) {
  console.log(textStatus, errorThrown);
}
...