Menu
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.
553
To auto-scroll to end of div when data is added with JavaScript, we can set the scrollTop of the div to the scrollHeight of the div. window. setInterval(() => { const elem = document. getElementById("data"); elem.
To auto scroll a page from top to bottom we can use scrollTop() and height() method in jquery. In this method pass the document's height in scrollTop method to scroll.
To use you just need to press CTRL+ Left click of your mouse and drag the mouse a bit in the direction you want to scroll the page. For example, if you want to scroll up to the page automatically, click CTRL+ left click and slightly move your mouse upwards, the tool will start scrolling up the page.
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); If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
