私のウェブページにはチャットウィンドウがあります。チャットのログが記入されると、ユーザーはスクロールバーを使用してメッセージ間を移動します。私は私のチャット・フレームに常に最後のメッセージが表示されるようにしたい。 CSS、JavaScriptを使ってどうすればいいですか?スクロールバーのデフォルトの場所を設定するには
おかげで、 Tomer
私のウェブページにはチャットウィンドウがあります。チャットのログが記入されると、ユーザーはスクロールバーを使用してメッセージ間を移動します。私は私のチャット・フレームに常に最後のメッセージが表示されるようにしたい。 CSS、JavaScriptを使ってどうすればいいですか?スクロールバーのデフォルトの場所を設定するには
おかげで、 Tomer
でも、あなたがここにあなたの質問にタグではありませんが、私は私のチャットのWebアプリケーションで使用するjQueryのソリューションです:
//Where chat_message_tray is the scrollable div in your chat
function chat_scroll(chat_messages_tray){
var scroll_amount = $(chat_messages_tray).attr("scrollHeight") - $(chat_messages_tray).height();
$(chat_messages_tray).animate({ scrollTop: scroll_amount}, 500);
}
DOM要素は、(良いものは、とにかく)scrollIntoView()
と呼ばれるメソッドをサポートしています。最後のチャットエントリ(<div>
など)に対応するDOM要素への参照がある場合は、scrollIntoView()
を使用して、周囲のコンテンツをスクロールして<div>
を表示するようにブラウザに指示することができます。
いくつかの複雑な(またはあまりにも複雑かもしれないが多分単に不運な)ページレイアウトでは、私は間違ったことをスクロールしたい、あるいはちょっと変わったことをしたいInternet Explorerと闘わねばならなかった。 scrollIntoView()
のようなものの性質は、ブラウザがそのスクロールをどのようにしたいかを正確に決定させるようなものです。一般に、単純なスクロールコンテナー(基本的に「オーバーフロー:オート」と固定高さのコンテナー)のかなり単純なコンテンツでは機能します。
大丈夫ですが、メッセージの各1つは、idが "message"(CSSと同じスタイルを維持する)のdivにあります。どうすればこの問題を解決できますか? – tomericco
まず、各メッセージに同じ "id"値を再使用するべきではありません。それは無効なマークアップであり、あらゆる種類の問題を引き起こす可能性があります。それぞれのメッセージに「id」が必要な場合は一意の「id」を付け、CSSですべてを制御する必要がある場合は「class」の値を使用します。最後のメッセージを見つけるには、コンテナから 'getElementsByTagName()'のようなものを使い、 "className"属性に適切な文字列を持つ要素を探します。最後のものは、まあ、最後のものです:-) – Pointy
それは醜いですが、私はプロではない、私はちょうど最も底の状態にスクロールバーを設定したい...他のアイデア?ありがとう。 – tomericco
http://radio.javaranch.com/pascarello/2005/12/14/1134573598403.html
第三の結果にGoogleから - 「divのスクロールバーの下部に」
はiframeまたはdivのチャットテキストですか? – Zevan
チャットフレームはdivです。 – tomericco