Zum Ende von div scrollen?

Ich erstelle einen Chat mit Ajax-Anfragen in Rails und versuche, ein Div dazu zu bringen, ohne viel Glück nach unten zu scrollen.

Ich wickle alles in dieses div:

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

Gibt es eine Möglichkeit, mit JS standardmäßig nach unten zu scrollen?

Gibt es eine Möglichkeit, es nach einer Ajax-Anfrage nach unten zu scrollen?

Folgendes verwende ich auf meiner Website:

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

Dies ist viel einfacher, wenn Sie jQuery scrollTop verwenden :

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

Sie können den folgenden Code verwenden:

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

So führen Sie mit JQuery einen reibungslosen Bildlauf durch:

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

Siehe das Beispiel zu JSFiddle

Hier ist, warum dies funktioniert:

Ref: scrollTop , scrollHeight , clientHeight

Verwenden von jQuery animieren :

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

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

glatte Schriftrolle mit Javascript:

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

Wenn Sie sich nicht darauf verlassen möchten, scrollHeighthilft der folgende Code:

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

Mit jQuery wird scrollTop verwendet, um die vertikale Position der Bildlaufleiste für ein bestimmtes Element festzulegen. Es gibt auch ein nettes jquery scrollTo-Plugin, das zum Scrollen mit Animationen und verschiedenen Optionen ( Demos ) verwendet wird.

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

Wenn Sie die Animationsmethode von jQuery verwenden möchten, um beim Scrollen nach unten eine Animation hinzuzufügen, überprüfen Sie das folgende Snippet:

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

Ich bin auf dasselbe Problem gestoßen, jedoch mit einer zusätzlichen Einschränkung: Ich hatte keine Kontrolle über den Code, mit dem neue Elemente an den Bildlaufcontainer angehängt wurden. Keines der Beispiele, die ich hier gefunden habe, hat mir erlaubt, genau das zu tun. Hier ist die Lösung, mit der ich gelandet bin.

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

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 oder jquery:

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

CSS:

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

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 das Umschließen von jQuery-Elementen mit HTML-DOM-Elementen ein wenig verwirrend mit eckig wird.

Auch für eine Chat-Anwendung empfand ich es als nützlich, diese Aufgabe nach dem Laden Ihrer Chats zu übernehmen. Möglicherweise müssen Sie auch eine kurze Zeitüberschreitung vornehmen.

kleiner Nachtrag: Bildlauf nur, wenn die letzte Zeile bereits sichtbar ist. Wenn ein kleines Bild gescrollt wird, bleibt der Inhalt dort, wo er ist (Achtung: nicht mit unterschiedlichen Schriftgrößen getestet. Dies erfordert möglicherweise einige Anpassungen in "> = Vergleich"):

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 Bonus-Snippet. Ich verwende Angular und habe versucht, einen Nachrichtenthread nach unten zu scrollen, als ein Benutzer verschiedene Konversationen mit Benutzern ausgewählt hat. Um sicherzustellen, dass der Bildlauf funktioniert, nachdem die neuen Daten mit dem ng-repeat für Nachrichten in das div geladen wurden, schließen Sie das Bildlauf-Snippet einfach in eine Zeitüberschreitung ein.

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

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

Sie können mit jQuery auch eine Animation an html,bodydas Dokument anhängen über:

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

Dies führt zu einem reibungslosen Bildlauf zum oberen Rand des Div mit der ID "div-id".

Java Script:

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

Scrollt zur letzten Zeile des vorhandenen Inhalts.

Auf diese Weise können Sie in Bezug auf die Dokumenthöhe ganz nach unten scrollen

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

Eine sehr einfache Methode hierfür ist das Einstellen scroll toder Höhe des Div.

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

Scrollen Sie zum letzten Element im div:

myDiv.scrollTop = myDiv.lastChild.offsetTop

Bei meiner Angular 6-Anwendung habe ich Folgendes getan:

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

Die Funktion clearInterval (Intervall) stoppt den Timer, um einen manuellen Bildlauf nach oben / unten zu ermöglichen.

Mein Szenario: Ich hatte eine Liste mit Zeichenfolgen, in der ich eine von einem Benutzer angegebene Zeichenfolge anhängen und automatisch zum Ende der Liste scrollen musste. Ich hatte eine feste Höhe für die Anzeige der Liste, nach der sie überlaufen sollte.

Ich habe die Antwort von @Jeremy Ruten ausprobiert, es hat funktioniert, aber es wurde zum (n-1) -ten Element gescrollt. Wenn jemand mit dieser Art von Problem konfrontiert ist, können Sie die setTimeOut()Methodenumgehung verwenden. Sie müssen den Code wie folgt ändern:

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

Hier ist der von mir erstellte StcakBlitz-Link, der das Problem und seine Lösung zeigt: https://stackblitz.com/edit/angular-ivy-x9esw8

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

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

Ich hoffe das hilft jemand anderem.

Manchmal ist die einfachste die beste Lösung: Ich weiß nicht, ob dies helfen wird, es hat mir geholfen, dort zu scrollen, wo ich es jemals wollte. Je höher das "y =" ist, desto weiter unten wird gescrollt und natürlich bedeutet "0" oben, so dass beispielsweise "1000" unten oder "2000" oder "3000" usw. sein kann, je nachdem, wie lange Sie sind Seite ist. Dies funktioniert normalerweise in einer Schaltfläche mit onclick oder onmouseover.

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

Stellen Sie den Abstand vom oberen Rand des scrollbaren Elements auf die Gesamthöhe des Elements ein.

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

Sie können die HTML DOM scrollIntoView-Methode wie folgt verwenden:

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

verwenden :

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

oder aktivieren Sie den Bildlauf nach unten:

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

Wenn dies zum Scrollen zum Ende des Chat-Fensters durchgeführt wird, gehen Sie wie folgt vor

Die Idee, im Chat zu einem bestimmten Div zu scrollen, war die folgende

1) Jedes Chat-Div, bestehend aus Person, Zeit und Nachricht, wird in einer for-Schleife mit der Klasse chatContentbox ausgeführt

2) querySelectorAll findet alle diese Arrays. Es könnten 400 Knoten sein (400 Chats)

3) gehe zum letzten

4) scrollIntoView ()

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