0

チャットプログラムを作っています。

すべてのチャット メッセージは、chat_viewport div 内にあります。

問題は、ページが更新されたときに、スクロールボックスまで自動的に下にスクロールしたいということです。

私はたくさんのコードをグーグルで検索しましたが、それらのすべてが機能していません:(

これは私のhtmlです

 <div id="chat_viewport">
        <ul style="height:380px; overflow:auto" id="chat">
            <li>
                test: 123123123213&nbsp;&nbsp;(2013-07-22 12:51:36)
            </li>
            <li>
                test: gogogo&nbsp;&nbsp;(2013-07-22 13:32:58)
            </li>
            <li>
                test: ddddd&nbsp;&nbsp;(2013-07-22 13:33:48)
            </li>
            <li>
                test: ddddd&nbsp;&nbsp;(2013-07-22 13:33:48)
            </li>
            <li>
                test: ddddd&nbsp;&nbsp;(2013-07-22 13:33:48)
            </li>
            <li>
                test: ddddd&nbsp;&nbsp;(2013-07-22 13:33:50)
            </li>
            <li>
                test: asdfasdfsdf&nbsp;&nbsp;(2013-07-22 13:36:36)
            </li>
            <li>
                test: new one&nbsp;&nbsp;(2013-07-22 13:37:30)
            </li>
            <li>
                test: testsetest&nbsp;&nbsp;(2013-07-22 13:37:58)
            </li>
            <li>
                test: ddddd&nbsp;&nbsp;(2013-07-22 13:40:11)
            </li>
            <li>
                test: sadfasdf&nbsp;&nbsp;(2013-07-22 13:40:51)
            </li>

            <li>
                admin: ccc&nbsp;&nbsp;(2013-07-26 15:12:37)
            </li>
        </ul>
    </div>

私は試した

 $("html, body").animate({
    scrollTop: $('#chat').offset().top + $('#chat').outerHeight(true) - $(window).height()
}, 500);
$('#chat').scrollTop($('#chat_viewport')[0].scrollHeight);
$("html, body").animate({
    scrollTop: $('#chat').offset().top - ($(window).height() - $("#chat").outerHeight() + 10)
}, 500);
  $("#chat").animate({
                scrollTop: $("#chat").scrollHeight
            }, 1000);

#chat と #chat_viewport の両方を試しましたが、すべてが機能していません:(

4

1 に答える 1

2

#chat でオーバーフローを設定すると、高さ自体が 380px に制限されるため、スクロールするものは何もありません。オーバーフローを #chat_viewport に移動しました

<div id="chat_viewport" style="height:380px; overflow:auto">
    <ul id="chat">
        <li>..</li>
    </ul>
</div>

次に、次のようなものが機能します。

var chat_height = $('#chat').outerHeight();
$('#chat_viewport').scrollTop(chat_height);

jsfiddle: http://jsfiddle.net/atRkJ/

于 2013-07-29T03:26:57.813 に答える