2

理解を深めるために、以前の（上部の）チャットメッセージをスムーズに移行するチャットボックスを実装しようとしています。

これがhttp://jsfiddle.net/eEEGE/です

[追加]をクリックすると、1〜9の数字をすべて上にスライドさせ、その下に10〜12を追加します。

言い換えれば、スクロールバーが常に下部でスクロール修正されるようにしたいのです。

追加後にスクロールバーの位置を変更できることは知っていますが、スライドアニメーションが表示されなくなります。

コードリファレンス

$(document).ready(function(){
    // set the default scroll bar to bottom of chat box
    $(".chat-list").scrollTop($(".chat-list")[0].scrollHeight);
    $("button").click(function(){
        $('.chat-list li:last-child').append('10<br/>11<br/>12');
        $('.chat-list li:last-child').show('slow');     
    });
});

<ul class="chat-list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li style="display:none"></li>
</ul>
<button>add</button>

.chat-list{
    height:100px;
    overflow:auto;
}
4

1 に答える 1

5 
    $(document).ready(function(){
        // set the default scroll bar to bottom of chat box
        $(".chat-list").scrollTop($(".chat-list")[0].scrollHeight);
        $("button").click(function(){
            $('.chat-list li:last-child').append('10<br/>11<br/>12');
// Do a callback for show()
            $('.chat-list li:last-child').show('slow', function() {
             $(".chat-list").scrollTop($(".chat-list")[0].scrollHeight);
            });        
        });
    });

へのコールバックを実行しshow()ます。scrollTop()$('.chat-list')[0].scrollHeight

アニメーションが必要な場合は、scrollTopプロパティをアニメーション化するだけです。

$(".chat-list").animate({
    scrollTop: $(".chat-list")[0].scrollHeight
 },'slow');
于 2013-01-31T08:10:33.373 に答える