How to automatically scroll to the end of a div when adding data?

Question

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

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

Displays a vertical scroll bar when enough data is added to the table. However, when new data is added, I would like the div element to automatically scroll down.

What JavaScript code can I use for this? If necessary, I open up opportunities in jQuery, but would prefer a JavaScript solution.

Answer 1

If you don't know when the data will be added to #data , you can set the interval to update the scrollTop element to its scrollHeight every couple of seconds. If you control the addition of data, just call the inside of the next function after adding the data.

 window.setInterval(function() { var elem = document.getElementById('data'); elem.scrollTop = elem.scrollHeight; }, 5000); 

Answer 2

 var objDiv = document.getElementById("divExample"); objDiv.scrollTop = objDiv.scrollHeight;