溢出：當我向div添加內容時，滾動不起作用

Question

我的頁面上有一個具有以下樣式的div，但沒有開頭的內容：

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

現在，我有一個簡單的Javascript函數，它向div添加了新行：

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

應該在div上添加一行並滾動到頂部。 但是，在div內的內容對於div而言變得太大之后，溢出不會滾動-在div的下邊界之外它仍然不可見。 當內容太大時，我該怎么做（最好是單獨使用CSS）以使div的滾動條顯示出來？

小提琴

Answer 1

scrollTop不是HTML屬性，但是它是jQuery方法 ，等等。

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

請注意，除非由於某種原因添加了scrollHeight ，否則它也不是HTML屬性，除非沒有標記，否則很難說清楚，但是您可能正在尋找本機的scrollHeight屬性

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