Auto horizontal scroll when content is added

Question

I am making a live twitter feed using nodejs and websockets. I am trying to get the display to automatically scroll to the left once the browser window is full and stop it overflowing vertically.

The project will be displayed on a fixed screen with so theres no need to worry about the browser resizing. Here's what I have so far:

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>

Duplicate of https://stackoverflow.com/questions/3742346/use-jquery-to-scroll-to-the-bottom-of-a-div-with-lots-of-text ? — Richard Housham, Aug 22 '17 at 15:54
@RichardHousham: I don't think so... OP talks about horizontal scroll. — Louys Patrice Bessette, Aug 22 '17 at 16:01
@user1756180 check this out https://stackoverflow.com/questions/45822166/auto-horizontal-scroll-when-content-is-added/45822849#45822849 — Chaitanya Ghule, Aug 22 '17 at 16:31

score 0 · Answer 1 · answered Aug 22 '17 at 16:05

0

Try this if container is a JavaScript DOM element:

$(container).scrollLeft(0);

Or this if container is a jQuery element:

container.scrollLeft(0);

.scrollLeft() documentation.

answered Aug 22 '17 at 16:05

Louys Patrice Bessette

33,375
6
36
64

score 0 · Answer 2 · answered Aug 22 '17 at 16:30

For div#container element first get it's scrollWidth and then use scrollLeft on that 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, this works for you. :)

Thanks but this is still rendering in a grid, wrapping vertically. I probably didnt explain very well but I would like each tweet to appear to the right of the previous one and then scroll the whole container left once the screen width is full. If that makes sense :/ — user1756180, Aug 22 '17 at 20:20

Auto horizontal scroll when content is added

2 Answers2