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

Question

私は、オーバーフロー：autoを使ってdiv内に内容を保持し、ページ内でサイズを変更してドラッグするとdivを取得しました。私はいくつかのAJAXを使ってサーバーからテキストの行を取り出し、divの最後に追加するので、コンテンツは下に向かって成長しています。これが起こるたびにdivを下にスクロールして、最近追加されたコンテンツが表示されるようにJSを使用したいと思います。これは、チャットルームやコマンドラインコンソールの操作方法に似ています。

これまでのところ、私はそれを行うには、このスニペットを使用してきた（私もjQueryの、したがって、$（）関数を使用しています）：

$("#thediv").scrollTop = $("#thediv").scrollHeight; 

それは私に矛盾する結果を与えていますが。場合によっては動作することもありますが、ユーザーがdivのサイズを変更したりスクロールバーを手動で移動したりすると、動作が完全に停止します。

ターゲットブラウザはFirefox 3であり、制御された環境に展開されているため、IEで動作する必要はありません。

どのようなアイデアですか？これは私に困ってしまった。ありがとう！

Answer 1

scrollHeightはコンテンツの全高である必要があります。 scrollTopは、要素のクライアント領域の上部に表示されるコンテンツへのピクセルオフセットを指定します。

は、だからあなたは本当に（まだjQueryのを使用して）欲しい：コンテンツの最後 clientHeight価値へのスクロールのオフセットを設定します

$("#thediv").each(function() 
{ 
    // certain browsers have a bug such that scrollHeight is too small 
    // when content does not fill the client area of the element 
    var scrollHeight = Math.max(this.scrollHeight, this.clientHeight); 
    this.scrollTop = scrollHeight - this.clientHeight; 
}); 

...。

Answer 2

ループを使用して1つの要素のjQueryを反復処理するのは非常に非効率的です。 IDを選択するときは、get（）または[]表記を使用してjQueryの最初のユニークな要素を取得するだけです。

var div = $("#thediv")[0]; 

// certain browsers have a bug such that scrollHeight is too small 
// when content does not fill the client area of the element 
var scrollHeight = Math.max(div.scrollHeight, div.clientHeight); 
div.scrollTop = scrollHeight - div.clientHeight; 

Answer 3

scrollIntoView

のscrollIntoView方法は、ビューに要素をスクロールします。

Answer 4

$("#thediv").scrollTop($("#thediv")[0].scrollHeight); 

Answer 5

私は3つの左フローティングされたdivタグ、および内容リサイズされていたのラッピングのdivを持っていました。これを解決しようとすると、div-wrapperのファンキーカラーの枠線/背景を有効にすることができます。問題は、サイズ変更されたdivコンテンツがdiv-wrapperの外側にオーバーフローしていた（そして、ラッパーの下のコンテンツ領域の下に流出した）ことでした。

上記の@ Shog9の答えを使用して解決しました。私の状況に適用されるように、これはHTMLのレイアウトだった：

これは私のjQueryのdivのラッパーサイズを変更することでした

<div id="div-wrapper"> 
    <div class="left-div"></div> 
    <div id="div-content" class="middle-div"> 
    Some short/sweet content that will be elongated by Jquery. 
    </div> 
    <div class="right-div"></div> 
</div> 

：注意することが

<script> 
$("#div-content").text("a very long string of text that will overflow beyond the width/height of the div-content"); 
//now I need to resize the div... 
var contentHeight = $('#div-content').prop('scrollHeight') 
$("#div-wrapper").height(contentHeight); 
</script> 

を、$（ '＃DIV-コンテンツ'） .prop（ 'scrollHeight'）は、ラッパーがサイズ変更する必要がある高さを生成します。また、実際のjQuery関数をscrollHeightで取得する他の方法は認識していません。 $（ '＃div-content'）scrollTop（）と$（ '＃div-content'）。heightのどちらも実際のコンテンツの高さの値を生成しません。これが誰かを助けることを願っています！