Overflow:scroll doesn't work when I add content to div

Question

I have a div on my page with the following styles and no content to begin with:

                        #chatwindow {
                                width: 500px;
                                height: 50px;
                                overflow-y: scroll;
                                margin: 5px auto;
                                background: white;
                                border: 1px solid black;
                        }

Now, I have a simple Javascript function which adds new lines to the div:

function updateChat(response) {
                        $('#chatwindow').append('<p>' + response + '</p>');
                        $("#chatwindow").attr({ scrollTop: $("#chatwindow").attr("scrollHeight") });
                }

It's supposed to add a line to the div and scroll to the top. However, after the content within the div becomes too large for the div, the overflow doesn't scroll - it remains invisible beyond the lower border of the div. What do I do (preferably with CSS alone) to make the div's scrollbar show up when the content becomes too large?

Fiddle

Answer 1

scrollTop is not an HTML attribute, it is however a jQuery method , among other things ?

$("#chatwindow").scrollTop( $("#chatwindow").attr("scrollHeight") );

note that scrollHeight is not an HTML attribute either, unless you added it for some reason, hard to tell without the markup, but you're probably looking for the native scrollHeight property

$("#chatwindow").scrollTop( $("#chatwindow").prop("scrollHeight") );