10

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);
});
rekire
  • 47,260
  • 30
  • 167
  • 264
Shaik Yasin Basha
  • 101
  • 1
  • 1
  • 3
  • You might find this helpful as well: http://stackoverflow.com/questions/9316415/the-same-old-issue-scrolltop0-not-working-in-chrome-safari/15181512#15181512 – zCoder Mar 03 '13 at 01:44
  • This elementary problem should be fixed in both Safari mobile and Chrome mobile by now...? Anybody has a working by-the-book solution please? – avia Aug 22 '21 at 11:21

8 Answers8

33

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

Allan Nienhuis
  • 3,961
  • 2
  • 23
  • 19
  • 4
    only 2 points? you should be given a medal or something. at least count on the eternal gratitude of some guy in argentina. – maltalef May 25 '13 at 22:15
  • I'm not able to reproduce this - could you please add a jsfiddle demo? – Gabriel Florit Jul 24 '13 at 16:18
  • @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. – Allan Nienhuis Aug 01 '13 at 16:13
  • 1
    This should be the answer. And @AllanNienhuis should receive a medal indeed. – bstst Feb 12 '16 at 09:14
  • 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?? – user2585548 Jan 29 '17 at 22:54
  • 1
    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. – Allan Nienhuis Jan 30 '17 at 19:04
  • 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 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... – pjehan Oct 28 '19 at 16:57
  • @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? https://stackoverflow.com/questions/58653046/page-always-autofocus-on-textarea-and-scrolltotop-is-not-working-then – newdeveloper Nov 01 '19 at 01:26
  • @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' – Allan Nienhuis Nov 02 '19 at 16:01
3

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.

Aitor Calderon
  • 763
  • 6
  • 16
  • Thanks for reply Aitor.. do we have any alternative for this.. scroll and messages can append bottom of div.. thanks in advance.. – Shaik Yasin Basha Sep 04 '12 at 11:36
  • 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. – Aitor Calderon Sep 05 '12 at 08:30
  • 6
    This bug has reduced my lifespan by at least a few days. :( – Bjorn Nov 23 '12 at 19:08
  • I edited my answer with an alternative way of doing a scroll, hope this helps. – Aitor Calderon Nov 27 '12 at 09:33
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");
KyleGill
  • 171
  • 1
  • 3
2

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.

David
  • 51
  • 4
2

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!

Waleed
  • 141
  • 1
  • 2
1

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.

Community
  • 1
  • 1
LukeS
  • 799
  • 2
  • 8
  • 17
1

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);
user3423547
  • 11
  • 2
  • 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. – Tim Cutting Jun 25 '14 at 10:48
0

This will work on a lot of browsers and devices and is very simple.

var scrollToTopBtn = document.getElementById("backtotop")
var rootElement = document.documentElement

function scrollToTop() {
  // Scroll to top logic
  rootElement.scrollTo({
    top: 0,
    behavior: "smooth"
  })
}
scrollToTopBtn.addEventListener("click", scrollToTop)
div {
  height:1000px;
  width:100vw;
}

.topdiv {
  background:blue;
}
  
.otherdiv {
  background:yellow;
}

button {
  width:150px;
  height:150px;
  font-size:25px
}
<html>
  <body>
    <div class="topdiv"></div>
    <div class="otherdiv"></div>
    <footer>
      <button id="backtotop">BACK TO TOP</button>
    </footer>
  </body>
</html>
avia
  • 1,527
  • 7
  • 19