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?
javascript
html
ajax
dMix
quelle
quelle
Dies ist viel einfacher, wenn Sie jQuery scrollTop verwenden :
quelle
$("#mydiv").scrollTop(function() { return this.scrollHeight; });
Sie können den folgenden Code verwenden:
So führen Sie mit JQuery einen reibungslosen Bildlauf durch:
Siehe das Beispiel zu JSFiddle
Hier ist, warum dies funktioniert:
Ref: scrollTop , scrollHeight , clientHeight
quelle
Verwenden von jQuery animieren :
quelle
Funktioniert ab jQuery 1.6
https://api.jquery.com/scrollTop/
http://api.jquery.com/prop/
quelle
Neuere Methode, die auf allen aktuellen Browsern funktioniert :
quelle
glatte Schriftrolle mit Javascript:
document.getElementById('messages').scrollIntoView({ behavior: 'smooth', block: 'end' });
quelle
Wenn Sie sich nicht darauf verlassen möchten,
scrollHeight
hilft der folgende Code:quelle
1E10
). Eine kleinere Anzahl funktioniertMit 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.
Wenn Sie die Animationsmethode von jQuery verwenden möchten, um beim Scrollen nach unten eine Animation hinzuzufügen, überprüfen Sie das folgende Snippet:
quelle
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:
Ich habe eine Geige gemacht, um das Konzept zu demonstrieren: https://jsfiddle.net/j17r4bnk/
quelle
<div class="abc"><div data-bind=attr : {'id': myId } ></div></div>
In diesem Code ist myId eine Variable. Wie kann ich im Skript auf diese ID zugreifen?Javascript oder jquery:
CSS:
quelle
Fand das wirklich hilfreich, danke.
Für die Angular 1.X-Leute da draußen:
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.
quelle
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"):
quelle
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.
Dadurch wird sichergestellt, dass das Bildlaufereignis ausgelöst wird, nachdem die Daten in das DOM eingefügt wurden.
quelle
setTimeout(function() { ... }, n)
Sie können mit jQuery auch eine Animation an
html,body
das 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".
quelle
Java Script:
document.getElementById('messages').scrollIntoView(false);
Scrollt zur letzten Zeile des vorhandenen Inhalts.
quelle
Auf diese Weise können Sie in Bezug auf die Dokumenthöhe ganz nach unten scrollen
quelle
Eine sehr einfache Methode hierfür ist das Einstellen
scroll to
der Höhe des Div.quelle
Scrollen Sie zum letzten Element im div:
quelle
Bei meiner Angular 6-Anwendung habe ich Folgendes getan:
Die Funktion clearInterval (Intervall) stoppt den Timer, um einen manuellen Bildlauf nach oben / unten zu ermöglichen.
quelle
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:Hier ist der von mir erstellte StcakBlitz-Link, der das Problem und seine Lösung zeigt: https://stackblitz.com/edit/angular-ivy-x9esw8
quelle
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 :
Ich hoffe das hilft jemand anderem.
quelle
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.
quelle
Stellen Sie den Abstand vom oberen Rand des scrollbaren Elements auf die Gesamthöhe des Elements ein.
quelle
Sie können die HTML DOM scrollIntoView-Methode wie folgt verwenden:
quelle
verwenden :
oder aktivieren Sie den Bildlauf nach unten:
quelle
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 ()
quelle
scrollIntoView
, sodass keine weitere hinzugefügt werden muss.