127

I have a table inside of a div with the following style:

#data {
    overflow-x:hidden;
    overflow-y:visible;
    height:500px;
}

This displays a vertical scroll bar once enough data is added to the table. However, when new data is added I would like the div element to auto-scroll to the bottom.

What JavaScript code could I use to do so? I am open to options in JQuery if necessary but would prefer a JavaScript solution.

Valamas
  • 24,169
  • 25
  • 107
  • 177
Drew Galbraith
  • 2,216
  • 4
  • 19
  • 22
  • This is not a dup of http://stackoverflow.com/questions/270612/scroll-to-bottom-of-div since the correct answer requires a timer to be setup. – Bryan Legend Nov 30 '15 at 22:43
  • 1
    @LoneCoder: why? the OP doesn't mention a timer...they could execute the scrolling code in the marked duplicate at whatever time they see fit. Fact is, stated so broadly this question surely is a duplicate [of _some_ question here on Stack Overflow](http://stackoverflow.com/search?q=%5Bjavascript%5D+auto+scroll+bottom), and the proposed one here seems useful enough to meet the requirements as stated above. – Peter Duniho Nov 30 '15 at 23:29

2 Answers2

180

If you don't know when data will be added to #data, you could set an interval to update the element's scrollTop to its scrollHeight every couple of seconds. If you are controlling when data is added, just call the internal of the following function after the data has been added.

window.setInterval(function() {
  var elem = document.getElementById('data');
  elem.scrollTop = elem.scrollHeight;
}, 5000);
VNO
  • 3,645
  • 1
  • 16
  • 25
  • 7
    This works, the solution is actually simpler for me because I have a single function that inputs the data into the table so I can just add the 3rd line of your code into the function. Thanks! – Drew Galbraith Sep 05 '11 at 05:07
  • 1
    ive seen performance problems, plugins freeze when doing this type of scrolling. – j_mcnally Nov 09 '13 at 01:15
  • 7
    It scrolls 90% of the way down – Natus Drew Oct 13 '14 at 02:46
  • 1
    @nathan I was using AngularJS and had the same problem, my solution was to create a $timeout wrapper with a time of 1ms, this way it scrolled after adding the content from the previous digest cycle. – Ryan Knell Feb 05 '16 at 01:56
  • 9
    I think this is not the optimal answer. What happen if you want to scroll up to check the data? every 5 sec. it is scrolled down automatically and you can not analyze the data in 5 sec... – karlihnos Feb 08 '17 at 14:00
  • After I tried a lot of other answers this is the only one that actually worked for me. At least for now. I will probably optimize later. – juliangonzalez Feb 14 '17 at 21:49
  • It scrolls all the way down (100%) for me.. i don't see a problem over here @nathantech – Syno Apr 12 '17 at 12:05
  • Works well when tied to an event call - adding text based upon an event trigger and also resizing. – steampowered Aug 07 '17 at 23:17
  • @karlihnos Great point, but what if like Drew Galbraith, you have a single function inputting data. Then, that does not occur. – ReinstateMonica3167040 Oct 14 '17 at 14:17
  • @NateGreat8 Same for me, even adding 20 to it doesn't seem to change like if it could only go so far as all but the last line of text. – Maxie Berkmann Jan 30 '20 at 19:09
  • Many other answers out there. This is the only one which actually works. – James Harcourt Jan 26 '23 at 17:44
56
var objDiv = document.getElementById("divExample");
objDiv.scrollTop = objDiv.scrollHeight;
Valamas
  • 24,169
  • 25
  • 107
  • 177
  • Howdy Valamas, it does not work with all major browser. Can you help me in this ? –  Jun 26 '14 at 06:34
  • @Kushal It worked for me on the chrome! Hi Valamas! If you are aware of browser compatibility issues, can you please tell us. Thanks – master_dodo Jan 13 '16 at 11:03
  • 1
    This does works in chrome and Firefox – Pini Cheyni Jun 30 '16 at 07:23
  • 5
    You can also try this : `function setFocusOnDivWithId(elementId) { const scrollIntoViewOptions = { behavior: "smooth", block: "center" }; document.getElementById(elementId).scrollIntoView(scrollIntoViewOptions); }; setFocusOnDivWithId(elementId);` – Sk96 May 18 '19 at 09:49
  • When the above code i use it work but also given extra bottom blank space. – user3181077 Dec 23 '21 at 07:28