it-swarm.com.de

Automatisch nach unten scrollen

Ich habe diesen Code, um den Chat zu laden

    function getMessages(letter) {
    var div = $("#messages");
    $.get('msg_show.php', function(data) {
        div.html(data);   
    });
}

setInterval(getMessages, 100);

Was muss ich hinzufügen, um automatisch nach unten zu scrollen #messages div beim Laden der Seite und bei jedem neuen Chat-Beitrag? 

Dies funktioniert nicht:

    function getMessages(letter) {
    var div = $("#messages");
    $.get('msg_show.php', function(data) {
        div.html(data);
        $('#messages').scrollTop($('#messages')[0].scrollHeight);
    });
}

setInterval(getMessages, 100);
12
Adam Výborný

Sehen wir uns zunächst einige nützliche Konzepte zum Scrollen an:

Wann sollten Sie blättern?

  • Der Benutzer hat zum ersten Mal Nachrichten geladen.
  • Neue Nachrichten sind eingetroffen und Sie befinden sich am unteren Rand der Bildlaufleiste (Sie möchten keinen Bildlauf erzwingen, wenn der Benutzer nach oben blättert, um vorherige Nachrichten zu lesen).

Programmatisch ist das:

if (firstTime) {
  container.scrollTop = container.scrollHeight;
  firstTime = false;
} else if (container.scrollTop + container.clientHeight === container.scrollHeight) {
  container.scrollTop = container.scrollHeight;
}

Vollständiger Chat-Simulator (mit JavaScript):

https://jsfiddle.net/apvtL9xa/

const messages = document.getElementById('messages');

function appendMessage() {
	const message = document.getElementsByClassName('message')[0];
  const newMessage = message.cloneNode(true);
  messages.appendChild(newMessage);
}

function getMessages() {
	// Prior to getting your messages.
  shouldScroll = messages.scrollTop + messages.clientHeight === messages.scrollHeight;
  /*
   * Get your messages, we'll just simulate it by appending a new one syncronously.
   */
  appendMessage();
  // After getting your messages.
  if (!shouldScroll) {
    scrollToBottom();
  }
}

function scrollToBottom() {
  messages.scrollTop = messages.scrollHeight;
}

scrollToBottom();

setInterval(getMessages, 100);
#messages {
  height: 200px;
  overflow-y: auto;
}
<div id="messages">
  <div class="message">
    Hello world
  </div>
</div>

25
zurfyx

Es ist schwer zu sagen, ohne den HTML-Code zu kennen, aber ich würde davon ausgehen, dass für Ihr div keine Höhe festgelegt ist und/oder kein Überlauf zulässig ist (beispielsweise durch CSS height: 200px; overflow: auto).

Ich habe eine Arbeitsprobe für jsfiddle gemacht: http://jsfiddle.net/hu4zqq4x/

Ich habe ein Dummy-HTML-Markup in einem div erstellt, das a) überläuft und b) eine festgelegte Höhe hat. Das Scrollen erfolgt durch Aufrufen der Funktion

function getMessages(letter) {
    var div = $("#messages");
    div.scrollTop(div.prop('scrollHeight'));
}

, in diesem Fall einmal auf 'documentReady'.

prop('scrollHeight') greift auf den Wert der Eigenschaft des ersten Elements in der Menge der übereinstimmenden Elemente zu.

8
UweB
    var l = document.getElementsByClassName("chatMessages").length;
    document.getElementsByClassName("chatMessages")[l-1].scrollIntoView();

das sollte funktionieren

1
iErcan

fügen Sie nach dem Anhängen in JQuery diese Zeile hinzu

<script>
    $("#messages").animate({ scrollTop: 20000000 }, "slow");
</script>
1
Govan

Was Sie tun müssen, ist es in zwei Divs aufzuteilen. Eine mit Überlauf-Einstellung für das Scrollen und eine innere für den Text, damit er überflüssig wird. 

<div id="chatdiv">
    <div id="textdiv"/>
</div>

textdiv.html("");
$.each(chatMessages, function (i, e) {
    textdiv.append("<span>" + e + "</span><br/>");
});
chatdiv.scrollTop(textdiv.outerHeight());

Sie können hier ein jsfiddle ausprobieren: http://jsfiddle.net/xj5c3jcn/1/

Natürlich möchten Sie nicht jedes Mal das gesamte Textdiv neu erstellen. Nehmen Sie das also mit einem Salzkorn - nur ein Beispiel.

1
aqez

Da ich kein Master in js bin, schreibe ich selbst Code, der prüft, ob der Benutzer unten ist. Wenn der Benutzer unten ist, blättert die Chat-Seite automatisch mit der neuen Nachricht Automatischer Bildlauf nach unten ..

JS-Code - 

var checkbottom;
jQuery(function($) {
$('.chat_screen').on('scroll', function() {
    var check = $(this).scrollTop() + $(this).innerHeight() >= $(this) 
[0].scrollHeight;
    if(check) {
       checkbottom = "bottom";
    }
    else {
    checkbottom = "nobottom";
    }
})
});
window.setInterval(function(){
if (checkbottom=="bottom") {
var objDiv = document.getElementById("chat_con");
objDiv.scrollTop = objDiv.scrollHeight;
}
}, 500);

hTML Quelltext - 

<div id="chat_con" class="chat_screen">
</div>
0
Gaurav Saini

Ich habe diese sehr einfache Methode während des Experimentierens herausgefunden: Stellen Sie die scrollTo auf die Höhe des div.

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

wenn Sie nur in der Höhe blättern, wird dies zu einem Problem, wenn der Benutzer seine vorherige Nachricht sehen möchte. also musst du etwas machen, dass bei neuer nachricht erst dann der code kommt. Jquery neueste Version verwenden. 1. Dort habe ich die Höhe überprüft, bevor die Nachricht geladen wurde . 2. Überprüfen Sie erneut die neue Höhe .. 3. Wenn die Höhe nur dann unterschiedlich ist, wird gescrollt, andernfalls wird nicht gescrollt. 4. nicht in der if-Bedingung können Sie einen beliebigen Klingelton oder eine andere Funktion einstellen, die Sie benötigen. Das wird abgespielt, wenn eine neue Nachricht kommt. Vielen Dank

var oldscrollHeight = $("#messages").prop("scrollHeight");
$.get('msg_show.php', function(data) {
    div.html(data);
    var newscrollHeight = $("#messages").prop("scrollHeight"); //Scroll height after the request
    if (newscrollHeight > oldscrollHeight) {
        $("#messages").animate({
            scrollTop: newscrollHeight
        }, 'normal'); //Autoscroll to bottom of div
    }
0

Sie müssen nicht jquery und Javascript mischen. Verwenden Sie so,

function getMessages(letter) {
    var message=$('#messages');
    $.get('msg_show.php', function(data) {
        message.html(data);
        message.scrollTop(message[0].scrollHeight);
    });
}

setInterval(function() {
    getMessages("letter");
}, 100)

Fügen Sie die scrollTop() in die get()-Methode ein.

Sie haben auch einen Parameter im Aufruf der Methode getMessage verpasst.

0
Anoop Joshi

um zu einem bestimmten Element in der Nachrichtenbox zu scrollen, gehen Sie zur folgenden Demo:

https://jsfiddle.net/6smajv0t/

function scrollToBottom(){
        const messages = document.getElementById('messages');
        const messagesid = document.getElementById('messagesid');  
        messages.scrollTop = messagesid.offsetTop - 10;
}

scrollToBottom();
setInterval(scrollToBottom, 1000);
#messages {
  height: 200px;
  overflow-y: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="messages">
  <div class="message">
    Hello world1
  </div>
  <div class="message">
    Hello world2
  </div>
  <div class="message">
    Hello world3
  </div>
  <div class="message">
    Hello world4
  </div>
  <div class="message">
    Hello world5
  </div>
  <div class="message">
    Hello world7
  </div>
  <div class="message">
    Hello world8
  </div>
  <div class="message">
    Hello world9
  </div>
  <div class="message" >
    Hello world10
  </div>
  <div class="message">
    Hello world11
  </div>
  <div class="message">
    Hello world12
  </div>
  <div class="message">
    Hello world13
  </div>
  <div class="message">
    Hello world14
  </div>
  <div class="message">
    Hello world15
  </div>
  <div class="message" id="messagesid">
    Hello world16 here
  </div>
  <div class="message">
    Hello world17
  </div>
  <div class="message">
    Hello world18
  </div>
  <div class="message">
    Hello world19
  </div>
  <div class="message">
    Hello world20
  </div>
  <div class="message">
    Hello world21
  </div>
  <div class="message">
    Hello world22
  </div>
  <div class="message">
    Hello world23
  </div>
  <div class="message">
    Hello world24
  </div>
  <div class="message">
    Hello world25
  </div>
  <div class="message">
    Hello world26
  </div>
  <div class="message">
    Hello world27
  </div>
  <div class="message">
    Hello world28
  </div>
  <div class="message">
    Hello world29
  </div>
  <div class="message">
    Hello world30
  </div>
</div>
0
Bhagyesh Patel

es funktionierte für mich, probiere es aus.

setInterval(function () {
    $("#messages").load("msg_show.php");

   $("#messages").animate({
        scrollTop: $("#messages")[0].scrollHeight}, -500);

}, 1000);
0
Shaik Matheen