divの一番下までスクロールしますか？

Railsでajaxリクエストを使用してチャットを作成していて、運が悪い状態でdivが一番下までスクロールできるようにしています。

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

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

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

ajaxリクエストの後、それを一番下までスクロールしておく方法はありますか？

これが私のサイトで使用するものです。

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

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

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

次のコードを使用できます。

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

jQuery animateを使用：

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

var mydiv = $("#scroll");
mydiv.scrollTop(mydiv.prop("scrollHeight"));

jQuery 1.6から機能

https://api.jquery.com/scrollTop/

http://api.jquery.com/prop/

現在のすべてのブラウザで機能する新しい方法：

this.scrollIntoView(false);

JavaScriptによるスムーズスクロール：

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

に依存したくない場合scrollHeightは、次のコードが役立ちます。

$('#scroll').scrollTop(1000000);

jQueryを使用して、scrollTopを使用して、任意の要素のscollbarの垂直位置を設定します。アニメーションやさまざまなオプション（デモ）でスクロールするために使用される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);

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

これは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/

JavaScriptまたはjquery：

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

CSS：

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

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

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と少し混乱するからです。

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

小さな補遺：最後の行がすでに表示されている場合のみスクロールします。少しだけスクロールした場合、コンテンツはそのままになります（注意：異なるフォントサイズでテストされていません。 "> =比較"で調整が必要になる場合があります）：

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;

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

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

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

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

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

これにより、「div-id」というIDを持つdivの上部にスムーズにスクロールします。

Javaスクリプト：

document.getElementById('messages').scrollIntoView(false);

存在するコンテンツの最後の行までスクロールします。

これにより、ドキュメントの高さを考慮して、一番下までスクロールできます

$('html, body').animate({scrollTop:$(document).height()}, 1000);

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

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

div内の最後の要素までスクロールします。

myDiv.scrollTop = myDiv.lastChild.offsetTop

私のAngular 6アプリケーションでは、次のようにしました：

postMessage() {
  // post functions here
  let history = document.getElementById('history')
  let interval    
  interval = setInterval(function() {
    history.scrollTop = history.scrollHeight
    clearInterval(interval)
  }, 1)
}

clearInterval（interval）関数はタイマーを停止して、手動で上下にスクロールできるようにします。

私のシナリオ：文字列のリストがあり、ユーザーが指定した文字列を追加して、リストの最後まで自動的にスクロールする必要がありました。リストの表示の高さを固定しましたが、その後はオーバーフローするはずです。

私は@Jeremy Rutenの答えを試しましたが、うまくいきましたが、それは（n-1）番目の要素までスクロールしていました。誰かがこのタイプの問題に直面している場合は、setTimeOut()メソッドの回避策を使用できます。以下のようにコードを変更する必要があります。

setTimeout(() => {
    var objDiv = document.getElementById('div_id');
    objDiv.scrollTop = objDiv.scrollHeight
}, 0)

これが私が作成したStcakBlitzリンクで、問題とその解決策を示しています。https：//stackblitz.com/edit/angular-ivy-x9esw8

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

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

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

時々最も単純なのが最良の解決策です。これが役立つかどうかはわかりませんが、私が望んでいたときにスクロールするのに役立ちました。「y =」の値が大きいほど、下にスクロールします。もちろん、「0」は上を意味します。たとえば、「1000」は下、「2000」や「3000」などになる場合があります。ページです。これは通常、onclickまたはonmouseoverのボタンで機能します。

window.scrollTo(x=0,y=150);

スクロール可能な要素の上端からの距離を要素の高さの合計に設定します。

const element = this.shadowRoot.getElementById('my-scrollable-div')
element.scrollTop = element.scrollHeight

次のようにHTML DOM scrollIntoViewメソッドを使用できます。

var element = document.getElementById("scroll");
element.scrollIntoView();

使用する ：

var element= $('element');
var maxScrollTop = element[0].scrollHeight - element.outerHeight();
element.scrollTop(maxScrollTop);

または下にスクロールすることを確認してください：

    var element = $(element);
    var maxScrollTop = element[0].scrollHeight - element.outerHeight();
    element.on('scroll', function() {
        if ( element.scrollTop() >= maxScrollTop ) {
            alert('scroll to bottom');
        }
    });

チャットウィンドウの下部までスクロールするためにこれが行われている場合は、次の操作を行います

チャットで特定のdivまでスクロールするアイデアは、次のとおりでした。

1）Person、time、およびmessageで構成される各チャットdivは、chatContentboxクラスのforループで実行されます

2）querySelectorAllは、このような配列をすべて検索します。400ノード（400チャット）

3）最後に行く

4）scrollIntoView（）

let lastChatBox = document.querySelectorAll('.chatContentBox'); 
lastChatBox = lastChatBox[lastChatBox.length-1]; 
lastChatBox.scrollIntoView();