javascript - div の一番下までスクロールしますか?

Question

私は Ajax リクエストを使用してチャットを作成しています。メッセージ div を一番下までスクロールしようとしていますが、うまくいきません。

私はこのdivですべてをラップしています:

#scroll {
    height:400px;
    overflow:scroll;
}

JSを使用してデフォルトで一番下までスクロールし続ける方法はありますか?

ajaxリクエストの後、一番下までスクロールし続ける方法はありますか?

score 1594 · Accepted Answer

私のサイトで使用しているものは次のとおりです。

var objDiv = document.getElementById("your_div");
objDiv.scrollTop = objDiv.scrollHeight;

score 379 · Accepted Answer

jQuery scrollTopを使用している場合、これははるかに簡単です:

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

score 154 · Accepted Answer

以下のコードを試すことができます。

function scrollToBottom (id) {
   var div = document.getElementById(id);
   div.scrollTop = div.scrollHeight - div.clientHeight;
}

JQueryでスムーズスクロールを実行するには:

function scrollSmoothToBottom (id) {
   var div = document.getElementById(id);
   $('#' + id).animate({
      scrollTop: div.scrollHeight - div.clientHeight
   }, 500);
}

JSFiddleの例を参照してください

これが機能する理由は次のとおりです。

参照: scrollTop、scrollHeight、clientHeight

score 96 · Accepted Answer

jQueryアニメーションの使用：

$('#DebugContainer').stop().animate({
  scrollTop: $('#DebugContainer')[0].scrollHeight
}, 800);

score 25 · Accepted Answer

Javascript を使用したスムーズスクロール:

document.getElementById('messages').scrollIntoView({ behavior: 'smooth', block: 'end' });

score 5 · Accepted Answer

Javascript または jquery:

var scroll = document.getElementById('messages');
   scroll.scrollTop = scroll.scrollHeight;
   scroll.animate({scrollTop: scroll.scrollHeight});

CSS:

 .messages
 {
      height: 100%;
      overflow: auto;
  }

score 4 · Accepted Answer

これは本当に役に立ちました、ありがとう。

そこにいるAngular 1.Xの人々のために：

angular.module('myApp').controller('myController', ['$scope', '$document',
  function($scope, $document) {

    var overflowScrollElement = $document[0].getElementById('your_overflow_scroll_div');
    overflowScrollElement[0].scrollTop = overflowScrollElement[0].scrollHeight;

  }
]);

jQuery 要素と HTML DOM 要素のラッピングは、Angular で少し混乱するからです。

また、チャットアプリケーションの場合、チャットが読み込まれた後にこの割り当てを行うと便利であることがわかりました。また、短いタイムアウトも平手打ちする必要がある場合があります。

score 4 · Accepted Answer

jQuery を使用して、特定の要素のスクロールバーの垂直位置を設定するためにscrollTopが使用されます。アニメーションとさまざまなオプションでスクロールするために使用される素敵なjquery scrollToプラグインもあります（デモ）

var myDiv = $("#div_id").get(0);
myDiv.scrollTop = myDiv.scrollHeight;

jQuery の animate メソッドを使用してスクロールダウン中にアニメーションを追加する場合は、次のスニペットを確認してください。

var myDiv = $("#div_id").get(0);
myDiv.animate({
    scrollTop: myDiv.scrollHeight
  }, 500);

score 4 · Accepted Answer

私は同じ問題に遭遇しましたが、追加の制約があります。スクロールコンテナーに新しい要素を追加するコードを制御できませんでした。私がここで見つけた例のどれも、私がそれをすることを許しませんでした. これが私が最終的に得た解決策です。

Mutation Observers( https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver ) を使用しているため、最新のブラウザーでのみ使用できます (ただし、ポリフィルは存在します)。

したがって、基本的にコードはそれを行います：

var scrollContainer = document.getElementById("myId");

// Define the Mutation Observer
var observer = new MutationObserver(function(mutations) {

  // Compute sum of the heights of added Nodes
  var newNodesHeight = mutations.reduce(function(sum, mutation) {
      return sum + [].slice.call(mutation.addedNodes)
        .map(function (node) { return node.scrollHeight || 0; })
        .reduce(function(sum, height) {return sum + height});
  }, 0);

  // Scroll to bottom if it was already scrolled to bottom
  if (scrollContainer.clientHeight + scrollContainer.scrollTop + newNodesHeight + 10 >= scrollContainer.scrollHeight) {
    scrollContainer.scrollTop = scrollContainer.scrollHeight;
  }

});

// Observe the DOM Element
observer.observe(scrollContainer, {childList: true});

コンセプトを示すためにフィドルを作成しました: https://jsfiddle.net/j17r4bnk/

score 3 · Accepted Answer

小さな補遺: 最後の行が既に表示されている場合にのみスクロールします。少しスクロールすると、コンテンツはそのまま残ります (注意: 異なるフォントサイズではテストされていません。これは、">= 比較" 内でいくつかの調整が必要になる場合があります):

var objDiv = document.getElementById(id);
var doScroll=objDiv.scrollTop>=(objDiv.scrollHeight-objDiv.clientHeight);                   

// add new content to div
$('#' + id ).append("new line at end<br>"); // this is jquery!

// doScroll is true, if we the bottom line is already visible
if( doScroll) objDiv.scrollTop = objDiv.scrollHeight;

score 3 · Accepted Answer

jQuery を使用して、次の方法でアニメーションをhtml,bodyドキュメントに添付することもできます。

$("html,body").animate({scrollTop:$("#div-id")[0].offsetTop}, 1000);

これにより、id "div-id" を持つ div の上部までスムーズにスクロールされます。

score 3 · Accepted Answer

ボーナススニペットとして。私は角度を使用しており、ユーザーがユーザーとのさまざまな会話を選択したときに、メッセージスレッドを一番下までスクロールしようとしていました。メッセージの ng-repeat を使用して新しいデータが div にロードされた後にスクロールが機能することを確認するには、スクロールスニペットをタイムアウトでラップするだけです。

$timeout(function(){
    var messageThread = document.getElementById('message-thread-div-id');
    messageThread.scrollTop = messageThread.scrollHeight;
},0)

これにより、データが DOM に挿入された後にスクロールイベントが確実に発生します。

score 1 · Accepted Answer

これに対する非常に簡単な方法はscroll to、を div の高さに設定することです。

var myDiv = document.getElementById("myDiv");
window.scrollTo(0, myDiv.innerHeight);

score 0 · Accepted Answer

これは古い質問であることは知っていますが、これらの解決策はどれもうまくいきませんでした。私は最終的に offset().top を使用して目的の結果を取得しました。以下は、チャットアプリケーションで最後のメッセージまで画面をゆっくりとスクロールするために使用したものです。

$("#html, body").stop().animate({
     scrollTop: $("#last-message").offset().top
}, 2000);

これが他の誰かに役立つことを願っています。

score -1 · Accepted Answer

CSS のみ:

.scroll-container {
  overflow-anchor: none;
}

子要素が追加されたときにスクロールバーが上部に固定されたままにならないようにします。たとえば、チャットの下部に新しいメッセージが追加された場合、チャットを新しいメッセージまでスクロールします。

javascript - div の一番下までスクロールしますか?

32 に答える 32

Related

Reference