jQuery scrollTop and Android Browsers: A Work Around

Mobile web applications have taken huge strides in the past fews years and have quickly become a viable solution to cross-platform development. Unfortunately there are still a few kinks to work out, such as javascript rendering on different devices.

jQuery’s scrollTop method on Android devices is one of those kinks. I ran into this problem at a client, and came across this solution. It appears that when removing the style “overflow-y: auto/scroll” (depending on which you are using), calling the scrollTop method and then switching the “overyflow-y” style back to auto or scroll allows the method to work. My guess is that scrollTop() is honored after the element you are trying to scroll is repainted.

This work around has been tested on a variety of Android and iOS devices and works on all of them.

Simple example:

  target.css('overflow-y', 'hidden');
  target.scrollTop(0);
  target.css('overflow-y', 'auto');

For a more detailed code explanation follow the link below.

JSFiddle: http://jsfiddle.net/ufLnP

2 Comments

  • Rich December 11, 2013 8:01 pm

    Great trick!

  • miemo.net January 15, 2014 7:05 am

    Hey, thanks a lot for posting this! This was a real lifesaver, was starting to get desperate with this issue…

Your email address will not be published. Required fields are marked *

Phone: 312-602-4000
Email: marketing@westmonroepartners.com
222 W. Adams
Chicago, IL 60606
Show Buttons
Share On Facebook
Share On Twitter
Share on LinkedIn
Hide Buttons