scrollTop not working in Android mobiles

Question

Am developing chat functionality for Andriod mobile app, for this am using jQuery and jQuery mobile theme frontend.

My problem is am trying to use scrollTop() function to append new messages in bottom. scrollTop() function working fine in all browsers but in Andriod it is not working.. any one have any idea regarding this. Here is the HTML code:

<div data-role="page" id="chatPage">
    <div data-role="content">
        <div id="incomingMessages" style="height: 180px;overflow: auto;">
        </div>
        <label for="messageText"><strong>Message:</strong></label>
        <table width="100%">
            <tr>
                <td width="75%">
                    <textarea name="messageText" id="messageText"></textarea>
                </td>
                <td width="25%">
                    <div id="sendButtonId" style="display:block">
                        <a data-role="button" id="chatSendButton" name="chatSendButton" value="Send" make_button_disabled="enable">
                            Send
                        </a>
                    </div>
                </td>
            </tr>
        </table>
        <table>
            <tr>
                <td>
                    <div id="endChatButton">
                        <a data-role="button" id="chatCloseButton" name="chatCloseButton" value="EndChat" make_button_disabled="enable">
                            End Chat
                        </a>
                    </div>
                </td>
            </tr>
        </table>
    </div>
</div>

Here is jQuery Code for scrollbuttom:

$("#chatSendButton").click(function() {
    var mes = $("#messageText").val();
    $("#incomingMessages").append("<div class='message'><span class='username'>" +'Admin'+ ":" +"</span> "+ mes + "</div>");
    $("#incomingMessages").scrollTop($("#incomingMessages")[0].scrollHeight);
});

Answer 1

I've noticed that in android .scrolltop() returns the value in decimals, which causes the issue in the calculation. I've checked this by alert($(this).scrollTop());

I would suggest using Math.round() in order to make this workable same as desktop and IOS. This is how I've achieved this:

var rounded = Math.round($(this).scrollTop());
if (rounded == $(this)[0].scrollHeight - $(this).height()) {

}

This worked for me!

Answer 2

It seems that this problem only happens when the overflow property is set to 'scroll' (which is the only time we would care about it). A workaround that worked for me was to first set the overflow to 'hidden', set the scrollTop, then set the overflow back to 'scroll'.