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. 您希望在点击 enter 时提交消息，
2. 你会没事的/想要使用divs 来包含消息，我个人更喜欢使用dl 或ol，但使用这些似乎会使演示复杂一些元素，尽管它们完全可以使用。

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

参考资料：

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