添加内容时自动水平滚动

我正在使用nodejs和websockets进行实时Twitter提要。我试图让显示器在浏览器窗口已满时自动滚动到左侧，并停止垂直溢出。添加内容时自动水平滚动

该项目将显示在固定屏幕上，因此无需担心浏览器调整大小。这是我到目前为止有：

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>

来源

2017-08-22 user1756180

重复的https://stackoverflow.com/questions/3742346/use-jquery-to-scroll-to-the-bottom-of-a-div-with-lots-of-text？ –

@RichardHousham：我不这么认为...... OP谈到了水平滚动。 –

@ user1756180检查了这一点https://stackoverflow.com/questions/45822166/auto-horizontal-scroll-when-content-is-added/45822849#45822849 –

试试这个，如果container是一个JavaScript DOM元素：

$(container).scrollLeft(0);

或者这是否container是一个jQuery元素：

container.scrollLeft(0);

.scrollLeft() documentation。

来源

2017-08-22 16:05:22

对于div#container元素首先获取它的scrollWidth，然后在该元素上使用scrollLeft。

$(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>

希望，这对你的作品。 :)

来源

2017-08-22 16:30:46

谢谢，但这仍然呈现在网格中，垂直包裹。我可能没有解释得很好，但我希望每条推文都出现在前一个推文的右侧，然后在屏幕宽度已满时向左滚动整个容器。如果这是有道理的：/ – user1756180

添加内容时自动水平滚动

回答

相关问题