javascript - 内容更新后 jScrollPane 不滚动到底部

Question

我有一个带有 jScrollPane 的聊天窗口。问题是，当我提交消息时，它不会向下滚动到我写的最后一个字/行，它总是落后一行。

$('body').delegate('#private-form', 'submit', function() {
    var sendMessage = $(this).find('input.private-message').val();
    if (!empty(sendMessage)) {
        socket.emit('send private message', {
            'message': sendMessage,
            'username': $(this).find('input.send-to').val()
        });
        $(this).find('input.private-message').val('');
        var data = '' +
            '<div class="person">' +
            '<img src="img/avatar.png" alt="">' +
            '<div class="details">' +
            '<div class="chat">' +
            '<p>' + sendMessage + '</p>' +
            '</div>' +
            '<div class="chat-view">' +
            '<p>10 min ago</p>' +
            '</div>' +
            '</div>' +
            '</div>';
        var settings = {
            showArrows: false,
            autoReinitialise: true,
        };
        var pane = $('.chat-single');
        pane.jScrollPane(settings);
        var contentPane = pane.data('jsp').getContentPane();
        contentPane.append(
            data
        );
        pane.data('jsp').scrollToBottom();
    }
    return false;
});

标记:

<div class="chatters">
    <div class="chat-single">

    </div>
</div>

样式:

.chatters {
    padding: 10px 0;
    height: 75%;
    width: auto;
    max-width: 390px;
}

.chat-single{
     height:100%
}

Answer 1

附加data后，在滚动到底部之前对pane.data('jsp')调用reinitialise。

contentPane.append(
    data
);
pane.data('jsp').reinitialise();
pane.data('jsp').scrollToBottom();

此外，如果您使用 autoReinitialise请务必提供合理的autoReinitialiseDelay因为默认情况下它每秒重新初始化两次(每 500 毫秒)。