Home » Android » jquery – scrollTop not working in Android mobiles

jquery – scrollTop not working in Android mobiles

Posted by: admin May 14, 2020 Leave a comment

Questions:

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);
});
How to&Answers:

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’.

Answer:

EDIT: I’ve found that if you set “top” style to, say, -120 it should “scroll” the div down by those 120px.

Here an HTML example (sorry for all the inline styles):

<div id="container" style="position:relative; display:block; overflow:scroll; height:100px; border:1px solid;">
    <div style="position: relative; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(255, 255, 255)), to(rgb(0, 0, 0))); height: 300px; width: 100%; background-position: initial initial; background-repeat: initial initial;" id="frm">
      <p>Message 1</p>
      <p>Message 2</p>
      <p>Message 3</p>
      <p>Message 4</p>
      <p style="color:#fff">Message you want to see right now</p>
      <p>Message 5</p>
      <p>Message 6</p>
      <p>Message 7</p>
      <p>Message 8</p>
</div>

And the Javascript part:

<script type="text/javascript">
function init()
{
    document.getElementById("setScroll").addEventListener('click',function()
    {
        document.getElementById("frm").style.top = -120;//Scroll by 120px
    });
}
</script>

I have tested this on 3.0 and 4.0 versions of Android (I must say it was on the emulator thought).

Hope this helps!

ORIGINAL MESSAGE:

Scroll top seems to not be working in some versions of Android as reported here, and there’s no definitive answer from Google about this (looks like mainly 3.0 and 4.0 have this issue, 2.3 and bellow or 4.1 doesn’t seem to be affected).

Sorry, but it seems like there’s no solution right now for this bug.

Answer:

I use the following for Android support when using scrollTop(). Has worked pretty well as a universal fix in my experience.

The CSS:

.androidFix {
    overflow:hidden !important;
    overflow-y:hidden !important;
    overflow-x:hidden !important;
}

The JS:

$(yourSelector).addClass("androidFix").scrollTop(0).removeClass("androidFix");

Answer:

A workaround for me was:

window.location.hash = '#element' + currentItem;

You can jump to the element with a specific id.

I know thats not the solution for everyone, buy perhaps I can help somebody.

Answer:

Sorry, I do not have an answer and do not have the reputation level necessary yet to leave a comment so I have to post this as an “answer”. I have spent a long time working on this trying to find a workaround have not found one. I have created a test page that gives some insight onto what is going on.

http://jsfiddle.net/RyLek/embedded/result/ <– DIV set to overflow auto
http://jsfiddle.net/RyLek/2/embedded/result/ <– DIV set to overflow scroll

The problem is the .scrollTop property is not updating to the current position in a DIV when you scroll down. Also when you set the scrollTop property it does not actually update the DIV scroll position.

In response to the comment “Aitor Calderon” made on the above answer. I tried setting the overflow property to scroll (see above sample) and that does not have any affect.

I have also tried a few third party browsers in the market such as Maxthon and Dolphin which also have this issue. If you are running an android 4.0 ICS device you can download the Google Chrome browser from the Google Play Store which the scrollTop property DOES work in. That is not an option for me as our company mostly has honeycomb devices which do not support this browser.

Here is a question I posted about this last week on this issue: jQuery scrollTop() does not work in scrolling DIV on mobile browsers, alternatives? The response was to try and implement this in CSS which I have not been successful in accomplishing.

Answer:

I needed to scroll from the top of the page to a specific element, and .offset was the solution for me for Android & iOS. .scrolltop only worked in iOS.

$('html, body').animate({scrollTop: $('#element').offset().top + 20}, 10);