添加内容时自动水平滚动

Question

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

Answer 1

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

$(container).scrollLeft(0);

如果container 是一个 jQuery 元素，则为：

container.scrollLeft(0);

.scrollLeft() documentation.

Answer 2

对于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>

希望，这对你有用。 :)