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后，在reinitialise上调用pane.data('jsp')，然后滚动到底部。

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

另外，如果您正在使用autoReinitialise，请确保提供合理的autoReinitialiseDelay，因为默认情况下，它会每秒重复初始化两次（每500毫秒）。

内容更新后，jScrollPane不会滚动到底部

1 个答案: