Question

我正在使用nodejs和websockets制作实时推特供稿。我试图让显示器在浏览器窗口已满时自动滚动到左侧并停止它垂直溢出。

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

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>

希望，这适合你。：）

添加内容时自动水平滚动

2 个答案: