DIV溢出滚动停止短

Question

我试图在溢出时为聊天框滚动制作DIV，但不幸的是它停止了，我不知道为什么。这是我的代码。

有人可以告诉我什么是错的以及如何解决它？现在发生的事情是它会向下滚动一会儿，但之后它会停止滚动。我一直坚持这个问题差不多一个小时了。

Answer 1

虽然我不是，但是现在，确定为什么你自己的尝试失败了（虽然我猜这是变量CHATBOX_ID的问题，但这只是因为你没有显示它来自哪里），这个版本有效。虽然有几个假设（我稍后会解释）：

var chatContentHeight, scrollVal;
var chatHeight = $('#chat').height();

$('#message').keyup(

function(e) {
    chatContentHeight = 0;
    if (e.keyCode == '13') { // assuming you want messages submitted on hitting 'enter'
        newMsg = $(this).val();
        $('<div />').text(newMsg).appendTo('#chat');
        $(this).val('');

        $('#chat > div').each(

        function() {
            chatContentHeight = chatContentHeight + $(this).outerHeight();
        });

        if (chatContentHeight > chatHeight) { // checking whether or not scrolling is needed
            scrollVal = (chatContentHeight - chatHeight); // defines the amount to scroll
            $('#chat').scrollTop(scrollVal);
        }
    }
});

JS Fiddle demo

我的假设是：

1. 您想要在点击时提交的消息，
2. 您可以/想要使用div来包含消息，我个人更喜欢使用dl或ol，但这似乎使稍微演示使用这些元素，尽管它们完全可以使用。

如果您想要解释（或者，至少，如果您想帮助我们提供解释），您至少需要发布完整的jQuery / JavaScript或链接到现场演示，可以重现您的问题（在您自己的服务器上或在JS Fiddle或类似的情况下）。

参考文献：

• keyup()。
• val()。
• appendTo()。
• each()。
• scrollTop()。