web-dev-qa-db-ja.com

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

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

私はこのdivにすべてをまとめています：

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

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

Ajaxリクエストの後に一番下までスクロールさせ続ける方法はありますか？

javascripthtmlajax
694
dMix

これが私のサイトで使うものです：

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

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

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

jQuery animate ：を使用する

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

次のコードを使うことができます。

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

JQueryで smooth スクロールを実行するには、次のようにします。

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

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

そしてそれはそれがどのように機能するかです：

enter image description here

参照： scrollTop 、 scrollHeight 、 clientHeight

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

JQuery 1.6から動作します

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

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

36
Akira Yamamoto

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

this.scrollIntoView(false);
23
tnt-rox

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

$('#scroll').scrollTop(1000000);
10
Benny Neugebauer

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

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

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

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

本当に役に立ちました、ありがとうございます。

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;

  }
]);

HTMLのDOM要素とjQuery要素の組み合わせが角度付きで少し混乱してしまうからです。

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

5
devonj

Javascriptまたはjquery：

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

Css：

 .messages
 {
      height: 100%;
      overflow: auto;
  }
4
Lay Leangsros

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

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;
4
Bruno Jennrich

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

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

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

4
mylescc

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

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

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

3
John Dunne

これにより、文書の高さに応じて、一番下までスクロールできます。

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

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

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

3
Benkinass

Javascript：

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

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

2
Barath

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

myDiv.scrollTop = myDiv.lastChild.offsetTop
1
mjaque

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

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

スムーズ Javascriptでスクロール：

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

0
remi

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

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

私はこれが他の人に役立つことを願っています。

0
BrianLegg