2010-12-31 9 views
1

私のウェブページにはチャットウィンドウがあります。チャットのログが記入されると、ユーザーはスクロールバーを使用してメッセージ間を移動します。私は私のチャット・フレームに常に最後のメッセージが表示されるようにしたい。 CSS、JavaScriptを使ってどうすればいいですか?スクロールバーのデフォルトの場所を設定するには

おかげで、 Tomer

+0

はiframeまたはdivのチャットテキストですか? – Zevan

+0

チャットフレームはdivです。 – tomericco

答えて

1

でも、あなたがここにあなたの質問にタグではありませんが、私は私のチャットの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); 
} 
+0

私にとってはうまくいかない。前提条件はありますか? – tomericco

+0

jQueryを使用しない場合は、JSの専門家にこれをプレーンJavaScriptに翻訳するか、実際にjQueryを使用してください。 – Pablo

+0

私は最新のjQueryバージョンを使用しますが、動作しません。この関数をどのように呼び出すのですか?これを次のように呼び出す必要がありますか?document.onload = chat_scroll( "my_chat_frame");ヘッドタグの間? – tomericco

1

DOM要素は、(良いものは、とにかく)scrollIntoView()と呼ばれるメソッドをサポートしています。最後のチャットエントリ(<div>など)に対応するDOM要素への参照がある場合は、scrollIntoView()を使用して、周囲のコンテンツをスクロールして<div>を表示するようにブラウザに指示することができます。

いくつかの複雑な(またはあまりにも複雑かもしれないが多分単に不運な)ページレイアウトでは、私は間違ったことをスクロールしたい、あるいはちょっと変わったことをしたいInternet Explorerと闘わねばならなかった。 scrollIntoView()のようなものの性質は、ブラウザがそのスクロールをどのようにしたいかを正確に決定させるようなものです。一般に、単純なスクロールコンテナー(基本的に「オーバーフロー:オート」と固定高さのコンテナー)のかなり単純なコンテンツでは機能します。

+0

大丈夫ですが、メッセージの各1つは、idが "message"(CSSと同じスタイルを維持する)のdivにあります。どうすればこの問題を解決できますか? – tomericco

+0

まず、各メッセージに同じ "id"値を再使用するべきではありません。それは無効なマークアップであり、あらゆる種類の問題を引き起こす可能性があります。それぞれのメッセージに「id」が必要な場合は一意の「id」を付け、CSSですべてを制御する必要がある場合は「class」の値を使用します。最後のメッセージを見つけるには、コンテナから 'getElementsByTagName()'のようなものを使い、 "className"属性に適切な文字列を持つ要素を探します。最後のものは、まあ、最後のものです:-) – Pointy

+0

それは醜いですが、私はプロではない、私はちょうど最も底の状態にスクロールバーを設定したい...他のアイデア?ありがとう。 – tomericco

関連する問題