私はうまく機能している小さなメッセージング/チャットシステムを作っています。問題は、メッセージの出力先である<div>
が必要な方法でスクロールしないことです。
すべての新しいメッセージがdivの下部に追加され、さらに追加されてスクロールバーが表示されると、スクロールは<div>
の上部に留まります。 スクロールが常に<div>
の下部に固定されるように、これを逆にする必要があります。
私が欲しいものの良い例はSteamのチャットウィンドウ、または質問に記入するために使用しているこのテキスト入力ですらあります。
jQueryを避けたいので、これで完全に行き詰まります。あなたが私を正しい方向に向けることができればそれは素晴らしいことです! [〜#〜] html [〜#〜]および[〜#〜] css [〜#〜]がこれを処理できるかどうか、または- JavaScriptはまったく必要です。
以下のJavascriptコードは、説明したようにdivのスクロールバーを下部に配置したままにする必要があります。
var objDiv = document.getElementById("divExample");
objDiv.scrollTop = objDiv.scrollHeight;
このソリューションと詳細については、以下のリンクを参照してください。 http://web.archive.org/web/20080821211053/http://radio.javaranch.com/pascarello/2005/12/14/1134573598403 .html
私はこれがより良い解決策だと思います:
element.scrollTop = element.scrollHeight - element.clientHeight;