Live Data Feed und Scrollbar Position

Ich Abrufen von Daten aus einer MySQL-Datenbank und Anzeigen auf einer Website mit der EventSource API. Bis jetzt funktioniert alles wie erwartet, aber ich möchte die Daten in einer festen Höhe div anzeigen und die Bildlaufleiste an die Unterseite dieser div - d. H. Immer die neuesten Feed-Ergebnisse zuerst zeigen.Live Data Feed und Scrollbar Position

Jetzt, wenn ich die Seite lade, wird die Bildlaufleiste an der Spitze fixiert.

Ich habe den Vorschlag here versucht, aber es scheint nicht funktionieren. Liegt es daran, dass ich mit Live-Daten und AJAX-Anfragen arbeite, um die div zu füllen?

Mein cose so weit ist;

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script> 
    <style type="text/css"> 
     #result { 
      overflow: auto; 
      max-height:224px; 
      width: 500px; 
     } 
    </style> 
    <script type="text/javascript"> 
       // scrollbar to bottom 
       $("document").ready(function(){ 
        var objDiv = document.getElementById("result"); 
        objDiv.scrollTop = objDiv.scrollHeight; 
       }); 
       // retrieve data from server and display in div 
       $("document").ready(function(){ 
        var source = new EventSource("data.php"); 
        var offline; 
        $.ajax({ 
         type: "POST", 
         url: 'data.php', 
         data: {lastSerial: true}, 
         dataType: 'json', 
         success: function(data){ 
          $.each(data, function(key, value) { 
           document.getElementById("result").innerHTML += "New transaction: " + value.SerialNo + ' ' + value.TimeStamp + "<br>"; 
          }); 
         } // end success 
        }); 
      });//end dom ready 
    </script> 
</head> 
<body> 
    <div id="result"><!--Server response inserted here--></div> 
</body> 
</html>

Das seltsame ist das, wenn ich den Live-Feed entfernen JavaScript und manuell einig (Lorem ipsum) Text in dem es funktioniert <div id="result"> hinzufügen, wird die Bildlaufleiste am unteren Rande der div.

ich etwas sehr dumm :)

Jede Beratung sehr geschätzt wird tun könnte.

Quelle

2017-08-16 TheOrdinaryGeek

Wenn Sie mehr Daten über Ajax laden, ändert sich die Größe des Inhalts. Haben Sie versucht, die Bildlauffunktion erneut festzulegen, nachdem Sie den Inhalt gerendert haben? d. h .:

So legen Sie den Bildlaufwert auf die gleiche Weise wie beim Laden der Seite fest.

Alternativ hier ist eine andere ganz andere Option:

Wenn Sie die letzten Werte wollen prominenteste sein, könnten Sie einfach geben sie in umgekehrter Reihenfolge, so dass die neuesten Versionen an der Spitze der sind div, wo der Benutzer sie zuerst sieht. Sie können die Methode .prepend() von jQuery verwenden, um am Anfang des Bereichs oberhalb der vorherigen Ergebnisse Inhalte hinzuzufügen. Dann muss man nicht mit dem Scrollen herumalbern. http://api.jquery.com/prepend/ Ich würde argumentieren, dass dies benutzerfreundlicher ist, aber es liegt natürlich an Ihnen.

Quelle

2017-08-16 10:12:40 ADyson

Perfekt funktioniert, beide Lösungen. Ich habe mich entschieden, mit Ihrer zweiten '.prepend()' Methode zu gehen - viel sauberer! Vielen Dank – TheOrdinaryGeek

Es war nur kleine Linie, die von Sie fehlen, fügen Sie bitte die folgenden Code

$.ajax({ 
    type: "POST", 
    url: 'data.php', 
    data: {lastSerial: true}, 
    dataType: 'json', 
    success: function(data){ 
     var objDiv = document.getElementById("result"); 

     $.each(data, function(key, value) { 
      objDiv.innerHTML += "New transaction: " + value.SerialNo + ' ' + value.TimeStamp + "<br>"; 
     }); 
     objDiv.scrollTop = objDiv.scrollHeight; 
    } // end success 
});

Quelle

2017-08-16 10:10:27 spankajd

Ich bin nicht 100% sicher das aber ein Problem, das ich sehe, ist, dass Sie einen asynchronen AJAX-Aufruf machen Zum Server nach scrollen Sie bis zum Ende des div.

Vielleicht etwas entlang der Linien von dieser versuchen:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script> 
    <style type="text/css"> 
     #result { 
      overflow: auto; 
      max-height:224px; 
      width: 500px; 
     } 
    </style> 
    <script type="text/javascript"> 
       // retrieve data from server and display in div 
       $("document").ready(function(){ 
        var source = new EventSource("data.php"); 
        var offline; 
        $.ajax({ 
         type: "POST", 
         url: 'data.php', 
         data: {lastSerial: true}, 
         dataType: 'json', 
         success: function(data){ 
          $.each(data, function(key, value) { 
           document.getElementById("result").innerHTML += "New transaction: " + value.SerialNo + ' ' + value.TimeStamp + "<br>"; 
          }); 
         var objDiv = document.getElementById("result"); 
         objDiv.scrollTop = objDiv.scrollHeight; 
         } // end success 
        }); 
      });//end dom ready 
    </script> 
</head> 
<body> 
    <div id="result"><!--Server response inserted here--></div> 
</body> 
</html>

Erläuterung: Die div bevölkert wird, nachdem Sie auf den Grund zu blättern. Wenn das Scrollen ausgeführt wird, befindet sich die scrollHeight Eigenschaft daher immer noch auf dem ursprünglichen Höhe-Wert des Div. Nun, wenn Sie die Scroll-Aktion ausführen, nachdem Sie das Div auffüllen, sollte es gut funktionieren.

Quelle

2017-08-16 10:11:15 tomcek112

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

dass Code nicht sagt, „Anker“ der Scrollbar auf den Boden, es sagt nur einmal, um die tatsächliche Höhe des div nach unten scrollen, aber da Sie diesen Code setzen vor Ihre Ajax-Anforderung, Ihre div muss leer sein, also setze diese zwei Zeilen am Ende deiner Ajax- "Erfolg" -Funktion.

success: function(data){ 
    $.each(data, function(key, value) { 
     document.getElementById("result").innerHTML += "New transaction: " + value.SerialNo + ' ' + value.TimeStamp + "<br>"; 
    }); 
    var objDiv = document.getElementById("result"); 
    objDiv.scrollTop = objDiv.scrollHeight; 
}

Quelle

2017-08-16 10:11:57 Neil

Live Data Feed und Scrollbar Position

Antwort

Verwandte Themen