Scrolle zum Ende von div?

Dies ist viel einfacher, wenn Sie jQuery verwenden:

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

verwenden von jQuery animate :

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

Sie können den folgenden Code verwenden:

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

Verwenden Sie den folgenden Code, um eine smooth -Scrollfunktion auszuführen (jQuery erforderlich):

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

Siehe sample auf JSFiddle

Und so funktioniert es:

Ref: scrollTop , scrollHeight , clientHeight

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

Funktioniert ab jQuery 1.6

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

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

Neuere Methode, die auf allen aktuellen Browsern funktioniert :

this.scrollIntoView(false);

Wenn Sie sich nicht auf scrollHeight verlassen wollen, hilft der folgende Code:

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

Mit jQuery wird mit scrollTop die vertikale Position der Bildlaufleiste für ein bestimmtes Element festgelegt. Es gibt auch ein Nice jquery scrollTo plugin , das zum Scrollen mit Animation und verschiedenen Optionen verwendet wird ( Demos ).

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

wenn Sie die animierte Methode von jQuery verwenden möchten, um beim Scrollen eine Animation hinzuzufügen, überprüfen Sie das folgende Snippet:

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

Fand das wirklich hilfreich, danke.

Für die Angular 1.X Leute da draußen: 

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;

  }
]);

Nur weil die Umhüllung in jQuery-Elementen im Vergleich zu HTML-DOM-Elementen ein wenig verwirrend wird, wenn sie mit eckigen Elementen arbeitet. 

Auch für eine Chat-Anwendung habe ich es als nützlich erachtet, diese Aufgabe nach dem Laden Ihrer Chats zu treffen. Möglicherweise müssen Sie auch auf das kurze Timeout klicken. 

Javascript oder Jquery:

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

Css:

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

kleiner Nachtrag: scrollt nur, wenn letzte Zeile bereits sichtbar ist. Wenn Sie ein wenig scrollen, bleibt der Inhalt dort, wo er ist (Achtung: Nicht mit unterschiedlichen Schriftgrößen getestet. Dies kann einige Anpassungen in "> = Vergleich" erfordern):

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;

Nur als Bonusschnipsel. Ich verwende eckig und habe versucht, einen Nachrichtenthread nach unten zu scrollen, wenn ein Benutzer andere Gespräche mit Benutzern auswählte. Um sicherzustellen, dass der Bildlauf funktioniert, nachdem die neuen Daten mit ng-repeat für Nachrichten in das div geladen wurden, wickeln Sie das Bildlauf-Snippet in ein Timeout ein.

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

Dadurch wird sichergestellt, dass das Scroll-Ereignis ausgelöst wird, nachdem die Daten in das DOM eingefügt wurden.

Sie können mit jQuery auch eine Animation an html,body Des Dokuments anhängen:

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

dies führt zu einem gleichmäßigen Bildlauf nach oben mit der ID "div-id".

Dadurch können Sie in Bezug auf die Dokumenthöhe ganz nach unten scrollen

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

Ich bin auf das gleiche Problem gestoßen, aber mit einer zusätzlichen Einschränkung: Ich hatte keine Kontrolle über den Code, der neue Elemente an den Bildlauf-Container anhängt. Keines der Beispiele, die ich hier fand, erlaubte mir genau das zu tun. Hier ist die Lösung, mit der ich endete.

Es verwendet Mutation Observers ( https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver ), wodurch es nur mit modernen Browsern verwendet werden kann (obwohl Polyfills existieren)

Im Grunde macht der Code genau das:

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});

Ich habe eine Geige gemacht, um das Konzept zu demonstrieren: https://jsfiddle.net/j17r4bnk/

Javascript:

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

Führt einen Bildlauf zur letzten Zeile des vorhandenen Inhalts durch.

Scrolle zum letzten Element innerhalb des div:

myDiv.scrollTop = myDiv.lastChild.offsetTop

Eine sehr einfache Methode dazu ist, den scroll to auf die Höhe des div einzustellen.

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

glatt scrollen mit Javascript:

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

Ich weiß, dass dies eine alte Frage ist, aber keine dieser Lösungen hat sich für mich bewährt. Am Ende habe ich offset (). Top verwendet, um die gewünschten Ergebnisse zu erzielen. Folgendes habe ich verwendet, um sanft den Bildschirm nach unten zu scrollen bis zur letzten Nachricht in meiner Chat-Anwendung:

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

Ich hoffe das hilft jemand anderem.