49

divのサイズを変更してページ内でドラッグしても、overflow：autoを使用してコンテンツをdiv内に保持するdivがあります。私はいくつかのajaxを使用してサーバーからテキストの行を取得し、それらをdivの最後に追加しているので、コンテンツは下向きに成長しています。これが発生するたびに、JSを使用してdivを一番下までスクロールし、チャットルームやコマンドラインコンソールが機能するのと同じように、最後に追加されたコンテンツが表示されるようにします。

これまで、このスニペットを使用して実行してきました（jQueryも使用しているため、$（）関数を使用しています）。

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

しかし、それは私に一貫性のない結果を与えています。動作する場合と動作しない場合があり、ユーザーがdivのサイズを変更したり、スクロールバーを手動で移動したりすると、完全に動作しなくなります。

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

アイデアはありますか？これは私を困惑させました。ありがとう！

4

6 に答える 6

46

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

だからあなたは本当に欲しいです（まだjQueryを使用しています）：

$("#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;
});

...これにより、スクロールオフセットが最後のclientHeight価値のあるコンテンツに設定されます。

于 2008-08-16T21:10:20.827 に答える
7

ループを使用して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;
于 2008-08-18T12:09:39.047 に答える
5 
$("#thediv").scrollTop($("#thediv")[0].scrollHeight);
于 2011-09-30T02:19:26.407 に答える
-1

左に浮かんでいて、内容がサイズ変更されている3つのdivをラップするdivがありました。これを解決しようとするときは、div-wrapper のファンキーな色の境界線/背景をオンにすると役立ちます。問題は、サイズ変更された div-content が div-wrapper の外側にオーバーフローしていたこと (およびラッパーの下のコンテンツ領域の下に出血していたこと) でした。

上記の@ Shog9の回答を使用して解決しました。私の状況に当てはめると、これは HTML レイアウトでした。

<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>

これは、div-wrapper のサイズを変更するための私の jQuery でした。

<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-content').prop('scrollHeight') は、ラッパーのサイズを変更する必要がある高さを生成します。また、実際の jQuery 関数である scrollHeight を取得する他の方法も知りません。$('#div-content').scrollTop() と $('#div-content').height のどちらも、実際の content-height 値を生成しません。これが誰かを助けることを願っています！

于 2013-10-25T20:34:39.813 に答える