javascript - カスタムチャットボックスのスクロールバー表示は常に下にあります

Question

カスタムチャットボックスがあります。スクロールにoverflow-yを追加しました。これで、テキストボックスに何かを書き込むと、スクロールバーウィンドウに表示されます。スクロールバーウィンドウに最後に書いたメッセージを表示させるにはどうすればよいですか。私の場合は常に一番上に表示されます。

score 1 · Accepted Answer

Javascriptでは、divのIDが"scrolling"

document.getElementById（ "scrolling"）。scrollTop = document.getElementById（ "scrolling"）。scrollHeight;

ここで、scrollTopはオブジェクトがスクロールされるピクセル数であり、scrollHeigthは、オーバーフローのために表示されないコンテンツを含む、要素のコンテンツの合計の高さです。

重要：

上記のコードは、チャットボックスに新しいメッセージが表示されるたびに実行する必要があります。これを行うには、スクリプトの適切な場所にメッセージを配置する必要があります。

ソース：

別の解決策：

たぶん、メッセージのアンカー（#idOfLastMessage）を用意し、www.yoursite.com / url-of-the-message-list＃idOfLastMessageを指すdivの代わりにiframeを使用することでそれを行うこともできます。

1 に答える 1