Automatischer horizontaler Bildlauf, wenn Inhalt hinzugefügt wird

Question

Ich mache einen Live-Twitter-Feed mit nodejs und websockets. Ich versuche, die Anzeige automatisch nach links zu scrollen, sobald das Browserfenster voll ist und es vertikal überläuft.

Das Projekt wird auf einem festen Bildschirm angezeigt, sodass Sie sich keine Gedanken über die Größenanpassung des Browsers machen müssen. Hier ist, was ich bisher:

socket.onmessage = function(message) { 
    var d = JSON.parse(message.data); 
    console.log(message.data); 
    var obj = { 
    text: d.text, 
    imgURL: d.imgURL, 
    } 
    updateView(obj); 
} 

var updateView = function(obj) { 
    container.append("<span class='inner'><img class='profile' src=" + obj.imgURL + 
    "></img><p>" + obj.text + "</p></span>"); 
} 

span#container { 
    width: 1450px; 
    min-width: 100px; 
    min-height: 100%; 
    overflow-y: hidden; 
    overflow-x: scroll; 
} 

span.inner { 
    float: left; 
    border: 1px #333333 solid; 
    width: 469px; 
    height: 450px; 
} 

<div id="container"></div> 

Answer 1

dies versuchen, wenn container ein JavaScript-DOM-Element ist:

$(container).scrollLeft(0); 

Oder diese, wenn container ein jQuery-Element ist:

container.scrollLeft(0); 

.scrollLeft() documentation.

Answer 2

Für div#container Element erhalten Sie zuerst scrollWidth und dann scrollLeft für dieses Element.

$(document).ready(function() { 
 
    let elem = $('#container'); 
 
    let x = elem.get(0).scrollWidth; 
 
    elem.scrollLeft(x); 
 
});

#container { 
 
    width: 150px; 
 
    height: 150px; 
 
    overflow-x: scroll; 
 
    overflow-y: hidden; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container"> 
 
SomeContent Here.SomeContent Here.SomeContent Here.SomeContent Here.SomeContent Here.SomeContent Here.SomeContent Here.SomeContent Here.SomeContent Here.SomeContent Here.SomeContent Here.Here.SomeContent Here.SomeContent Here.SomeContent Here.Here.SomeContent Here.SomeContent Here.SomeContent Here.Here.SomeContent Here.SomeContent Here.SomeContent Here.Here.SomeContent Here.SomeContent Here.SomeContent Here.Here.SomeContent Here.SomeContent Here.SomeContent Here.Here.SomeContent Here.SomeContent Here.SomeContentSomeContent Here.SomeContent Here.SomeContent Here.Here.SomeContent Here.SomeContent Here.Here.SomeContent Here.SomeContent Here.Here.SomeContent Here.SomeContent Here.SomeContentHere.SomeContent Here.SomeContent Here.Here.SomeContent Here.SomeContent Here.SomeContentHere.SomeContent Here.SomeContent Here.Here.SomeContent Here.SomeContent Here.SomeContentHere.SomeContent Here.SomeContent Here.Here.SomeContent Here.SomeContent Here.SomeContentHere.SomeContent Here.SomeContent Here.Here.SomeContent Here.SomeContent Here.SomeContentHere.SomeContent Here.SomeContent Here.Here.SomeContent Here.SomeContent Here.SomeContentHere.SomeContent Here.SomeContent Here.Here.SomeContent Here.SomeContent Here.SomeContent Here.SomeContent Here.SomeContent Here.Here.SomeContent Here.SomeContent Here.SomeContent Here.SomeContent Here.SomeContent Here.Here.SomeContent Here.SomeContent Here.SomeContentHere.SomeContent Here.SomeContent Here.Here.SomeContent Here.SomeContent Here.Here.SomeContent Here.SomeContent Here.Here.SomeContent Here.SomeContent Here.SomeContentHere.SomeContent Here.SomeContent Here.Here.SomeContent Here.SomeContent Here.SomeContent Here.SomeContent Here.SomeContent Here.Here.SomeContent Here.SomeContent Here.Here.Here.SomeContent Here.SomeContent Here.SomeContent Here.Here.SomeContent Here.SomeContent Here.SomeContent Here.SomeContent Here.SomeContent Here.SomeContent Here.SomeContent Here.SomeContent Here.SomeContent Here.SomeContent Here.SomeContent Here.SomeContent Here.SomeContent Here.SomeContent Here.SomeContent Here.SomeContent Here.SomeContent Here. SomeContent Here.SomeContent Here.SomeContent Here.SomeContent Here.SomeContent Here.SomeContent Here.SomeContent Here.SomeContent Here.SomeContent Here.SomeContent Here. 
 
</div>

Hope, funktioniert dies für Sie. :)