it-swarm.com.de

Scrolle zum Ende von div?

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

Ich wickle alles in dieses div ein:

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

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

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

673
dMix

Was ich auf meiner Website benutze:

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

Dies ist viel einfacher, wenn Sie jQuery verwenden:

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

verwenden von jQuery animate :

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

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:

 enter image description here

Ref: scrollTop , scrollHeight , clientHeight

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

Funktioniert ab jQuery 1.6

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

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

34
Akira Yamamoto

Neuere Methode, die auf allen aktuellen Browsern funktioniert :

this.scrollIntoView(false);
21
tnt-rox

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

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

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

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. 

6
devonj

Javascript oder Jquery:

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

Css:

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

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

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.

4
mylescc

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".

3
John Dunne

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

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

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/

3
Benkinass

Javascript:

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

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

2
Barath

Scrolle zum letzten Element innerhalb des div:

myDiv.scrollTop = myDiv.lastChild.offsetTop
1
mjaque

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

glatt scrollen mit Javascript:

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

0
remi

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.

0
BrianLegg