スクロール可能な要素を＆＃8220;下部に配置する＆＃8221;コンテンツを追加しながら

Question

作業中のWebアプリ用のユーティリティページを作成しています。 「コンソール」として使用したい要素があります。種類。

Ajax呼び出しを介してコンソールのエントリを取得します（プロトタイプの Ajax.PeriodicalUpdater を使用）。

私が抱えている問題は、「コンソール」の下部に新しい行を挿入すると、スクロールバーが初期位置にとどまることです（手動で下にスクロールしない限り、常に一番上の行が表示されます）。

スクロールバーを自動的に下部に配置するにはどうすればよいですか

このプロジェクトでそれを必要とするいくつかのライブラリのプロトタイプを使用しているため、可能であれば、そのJavaScriptまたは通常のJavaScriptを使用することをお勧めします。

メモとして、私はすでにこれを試しました：

onComplete: function() { 
    $('console').scrollTop = $('console').scrollHeight;
}

ほとんどの場合はほぼ動作しますが、常に「一歩遅れ」であり、最新のアイテムが表示されません。

Answer 1

new Ajax.PeriodicalUpdater(container, url, {
    onComplete: function() {
        (function() {
            container.scrollTop = container.scrollHeight;
        }).defer();
    }
});

Answer 2

はい、私はほぼ同じもの（Ajaxコンソール）を構築していましたが、オーバーフローしたdivが一番下まで収まらないという問題がありました。

そしてStack Overflowが解決に役立ちました！それがあなたにも役立つことを願っています！

JavaScriptでオーバーフローしたDIVをスクロールする

編集：私の質問ではjQueryを使用しましたが、問題はJSフレームワークではなく、使用しているCSS属性にあります。一部のブラウザはこれらの属性に少しバグがあるため、基本的にMath.max（div.scrollHeight、div.clientHeight）を取得する必要があります。