javascript - 追加滚动框后重置 UL？

Question

我有一个<ul>与 overflow:auto; ，现在我想添加 <li>动态地使用 append(); 。不幸的是，在附加新的 <li> 后，我无法将滚动框自动移动到底部。 :

HTML:

<div class="chatBoxContent" id="chatBoxContent">
    <ul id="chatMessages">...
    </ul>
</div>

JavaScript:

    $(function(){
        $('#chatBoxContent').jScrollPane();
    });

    $('#chatText').on('keyup', function(e) {
    if (e.which == 13) {
        e.preventDefault();

        if(!$('#chatText').val()){ 
            alert('You need to write a message!'); 
        }else{ 
            $.ajax({
                type: "POST",
                url: "ajax/ajax.AddChat.php",
                data: {},
                success: function(html){
                    $('#chatMessages').append(html);  
                    $('#chatBoxContent').data('jsp').scrollToBottom();     
                }  
            });
        }
    }
});   

我正在使用 jQuery 和 jscrollpane。

Answer 1

这有点笨拙，可能(几乎肯定)有更好的方法，但由于没有其他人回答，我想我应该快速查看一下。我向 li 和 current 类添加了 tabindex，以便它可以获得焦点。 JSfiddle现在离开电脑去看电影，祝你好运。

var old=$('#thelist').find('li').attr('id','current');
old.removeAttr( "id" );
var html="<li id='current' tabindex='1'>Goodbye</li>";
$('#thelist').append(html);
$('#current').focus();

#current{background-color:lime;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="thelist">
    <li id="current"> Hello </li><li> Hello </li><li> Hello </li><li> Hello </li><li> Hello </li><li> Hello </li><li> Hello </li><li> Hello </li><li> Hello </li><li> Hello </li><li> Hello </li><li> Hello </li><li> Hello </li><li> Hello </li><li> Hello </li><li> Hello </li><li> Hello </li><li> Hello </li><li> Hello </li><li> Hello </li><li> Hello </li><li> Hello </li><li> Hello </li><li> Hello </li><li> Hello </li><li> Hello </li>
</ul>