Question

自动滚动功能可以自行处理几条消息。然后它随机发出并在用户发送消息时开始向上滚动。

这是适用的Javascript。而且风格有限（还没有真正的造型。）此外，如果您想要参考它的外观，该网站是http://schoolsurvivaltools.com:3000

//send message
$messageForm.submit(function(e) {
    e.preventDefault();
    socket.emit('send message', $messageBox.val());
    $messageBox.val("");
    $("#chat").animate({ scrollTop: $("#chat").height() }, "fast");
    return false;
});

//Add the users message to the chat.
socket.on('pushMessage', function(data){
    $chat.append("<li><b>" + data.nick+ ": " + "</b>" + data.msg + " </br>" + "</li>");
    $("#chat").animate({ scrollTop: $("#chat").height() }, "fast");
});

样式：

#chat {
    height:500px;
    width:300px;
    overflow-y:scroll;
    overflow-x:auto;
}
#mainWrap {
    display:none;
}
#chatWrap {
    float: left;
    border:1px #000 solid;
    overflow-y:scroll;
    width:302px;
}

Answer 1

jQuery中的height函数将为您提供元素的高度，但您需要元素内容的高度。见How do I get the height of a div's full content with jQuery?

在聊天页面中发送消息后，Jquery会向上滚动

1 个答案: