添加內容時自動水平滾動

我正在使用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

添加內容時自動水平滾動

回答

相關問題