使用javascript将新内容添加到div时自动将div滚动到底部

Question

I have a div that takes new content as shown from a text area as shown

<div style="overflow: auto; overflow-x: hidden; height:296px;" id="container"></div>

when the div fills to the maximum height, I am trying to achieve that the div should show new contents by scrolling down automatically and this is my attempt

for (var i = 0; i < json.length; i++) {
                        ....
                    document.getElementById('container').innerHTML = contents;
                    //this is the code I am trying to use to make it scroll automatically down when new content is added
                    document.getElementById('container').scrollBottom = y;

                } else {
                    alert('Request failed.  Returned status of ' + xhr.status);

contents in the div is not scrolling down automatically when the div reaches 296px. Please what could be wrong?

Answer 1

I was able to solve my problem using this

$("#container").scrollTop($("#container")[0].scrollHeight);

the above replaced this:

document.getElementById('container').scrollBottom = y;

And my problem is solved.