jScrollPane doesn't scroll to bottom after content update

Question

I have a chat window with a jScrollPane. The problem is that when I submit a message it doesn't scroll down to the last word/line I wrote, it's always a line behind.

$('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;
});

Markup:

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

    </div>
</div>

Styles:

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

.chat-single{
     height:100%
}

Answer 1

After appending the data , call reinitialise on pane.data('jsp') before scrolling to the bottom.

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

Also, if you're using autoReinitialise be sure to provide a reasonable autoReinitialiseDelay since by default it does this re-initialisation twice per sencond (every 500ms).