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);
});

Solution 1

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

Solution 2

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.

Solution 3

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");

Solution 4

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.

Solution 5

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.

View more solutions

Comments

[Shaik Yasin Basha]

Thanks for reply Aitor.. do we have any alternative for this.. scroll and messages can append bottom of div.. thanks in advance..

[Aitor Calderon]

I've tried to make a workaround this bug, for that I used the example posted at google groups page I attached. I found as a solution to set css overflow property to "scroll". On Desktop browser that would force scrolling bars too appear, but in android that won't happend, so maybe trying to set overflow to scroll only on android devices could be a solution. If this helps, please tell me and I'll edit my answer to meet my findings.

[Bjorn]

This bug has reduced my lifespan by at least a few days. :(

[Aitor Calderon]

I edited my answer with an alternative way of doing a scroll, hope this helps.

[maltalef]

only 2 points? you should be given a medal or something. at least count on the eternal gratitude of some guy in argentina.

[Gabriel Florit]

I'm not able to reproduce this - could you please add a jsfiddle demo?

[Allan Nienhuis]

@GabrielFlorit who are you directing your request to? Shaik or me? I'm not going to produce a JSFiddle to prove my answer - it was just a suggestion that worked for me (and is referenced on the android browser bug report for this problem). If it doesn't work for you I'm not sure what to suggest - this issue is fairly old, it might be resolved now.

[Tim Cutting]

This doesn't work in Windows Phone. Annoyingly, scrollTop(0) does though. Therefore, this answer and some device detection for WP fixed it for me.

[bstst]

This should be the answer. And @AllanNienhuis should receive a medal indeed.

[user2585548]

this doesnt make sense, if a visitor cant even scroll to a certain area of the page because the body is set to "hidden" then you wouldnt need scrolltop anyway because everything you need to see would HAVE TO be in the immediate viewport. where exactly would you be scrolling to??

[Allan Nienhuis]

for this workaround, you only temporarily set the overflow to hidden. The three steps occur one after the other in the same event. The user never notices that the overflow is set to hidden. the overflow is only hidden at the instant that the scrollTop is set. once the scrollTop is set and the overflow is set back to scroll, the UI is left in the desired state.

[pjehan]

I had the same problem on a ReactJS project. Had to add the CSS rule overflow: hidden; to one of the parent container to make it work. It doesn't make sense to me because document.documentElement always return the <html> element so I don't really understand why a container would make any difference... It works if I paste the code directly in the browser console so it seems to be related to the clicked element anyway...

[newdeveloper]

@AllanNienhuis your answer seems to have some solution for my problem but my textbox still get focus and scrolls to bottom on page loads. could you please help on related question please? stackoverflow.com/questions/58653046/…

[Allan Nienhuis]

@newdeveloper looks like you found a different solution, but the workaround here would look like: document.body.style.overflow = 'hidden'; document.body.scrollTop = 0; document.body.style.overflow = 'scroll'; // or overflow-y and/or 'auto'