JavaScript を使用したオーバーフローした DIV のスクロール

StackOverflow https://stackoverflow.com/questions/13362

質問

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

これまでのところ、私はこのスニペットを使用してそれを行ってきました（jQueryも使用しているため、$()関数も使用しています）。

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

ただし、一貫性のない結果が得られています。機能する場合もあれば機能しない場合もあり、ユーザーが div のサイズを変更したり、スクロール バーを手動で移動したりすると、完全に機能しなくなります。

ターゲット ブラウザは Firefox 3 で、制御された環境にデプロイされるため、IE で動作する必要はまったくありません。

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

役に立ちましたか？

解決

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 価値のあるコンテンツ。

他のヒント

scrollIntoView

の スクロールイントゥビュー メソッドは要素をスクロールして表示します。

ループを使用して 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;

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

プレーンな JS で実行できます。秘訣は、scrollTop を要素の合計の高さ以上の値に設定することです (scrollHeight):

const theDiv = document.querySelector('#thediv');
theDiv.scrollTop = Math.pow(10, 10);

から MDN:

要素で利用可能な最大値よりも大きい値に設定すると、Scrolltopは最大値に落ち着きます。

一方、の値は、 Math.pow(10, 10) 次のような高すぎる値を使用してトリックを実行しました Infintiy または Number.MAX_VALUE スクロールトップを次のようにリセットします 0 (Firefox 66)。

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

上記の@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 ラッパーのサイズを変更するための私の 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 のどちらも、実際のコンテンツの高さの値を生成しません。これが誰かの役に立てば幸いです!

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top