Comments on: Native scrolling in jQuery Mobile/PhoneGap applications

By: Amyo Kabir

Amyo Kabir — Wed, 04 Sep 2013 12:32:55 +0000

Helps a lot. Saved my time. Thanks.

By: Chad Coward

Chad Coward — Thu, 08 Aug 2013 18:12:39 +0000

I have a problem when using this method on Mobile Safari (iPad 2) with JQM 1.3.1. When focused on an input, a large white background seems to cover half of the screen, sometimes more sometimes less. I changed the body’s color to black and the background also changed to black. I’m assuming the body is somehow reacting, for some reason? Have you heard of this?

By: Jiang Kuo

Jiang Kuo — Fri, 26 Jul 2013 10:18:34 +0000

Thanks bro! Great job!

By: Ashish

Ashish — Sun, 21 Jul 2013 10:55:49 +0000

I forgot to mention one point. The targeted devices of my app are android tablets. I am testing the app in an android tablet version of which is 4.1.2.

By: Ashish

Ashish — Sun, 21 Jul 2013 10:53:06 +0000

Thanks for posting this article but this fix is not working for my app. I am using jQuery Mobile. I have a page which opens as overlay. There are two divisions (one for overlay and one for overlay content). For overlay position is given ‘fixed’ and for overlay content the overflow is given ‘scroll’. The content’s height is more than that of overlay so in order to let user see the complete content it should be scrollable but it’s not allowing users to scroll the overlay content. As you already mentioned ‘-webkit-overflow-scrolling: touch’ doesn’t work on android (or it is not supported I guess). Request you to help me get a workaround of this scrolling issue. Thanks in advance.

By: alain

alain — Sat, 08 Jun 2013 06:38:41 +0000

Am I missing something ? When I run your snippet in phonegap 2.6, the header moves along with the list when I scroll down. Shouldn’t the header stay at position 0,0 and never move ?

By: Tom M

Tom M — Wed, 10 Apr 2013 13:20:07 +0000

Any suggestions on the best approach to get scrolling to work on Android 2.2 or 2.3.
I need an element to be scrollable not the whole page (as in this code example).
My problem occurs when I apply a “height” to the Div Containing the listview; scrolling
stops. No issues with scrolling the whole page. Thanks in advance for your help.

By: amer deep

amer deep — Mon, 11 Mar 2013 12:23:26 +0000

Really awesome, I have wasted lot of time with iscroll because I need scroll for left slide menu (panels in JQM) but it takes it for whole page or either whole panel instead of particular element. I have gone through many sites and many solutions but it wont work as per expected. But your 4 line of class rocks, many thanks to you for sharing this solution.

By: Mark Rummel

Mark Rummel — Thu, 21 Feb 2013 17:10:57 +0000

This worked for my jQueryMobile+Phonegap Build app. Thank you very, very much! However, it seems to have broken the following code: $('html, body').animate({scrollTop: $('#voteHeader').offset().top}, 2500); The code above should scroll down the page to the div with an id of "voteHeader". However, once I implemented the native scrolling solution you mentioned above, it stopped working. I have tried multiple things, but nothing seems to be working. Here are some of the things I've attempted: $('#container').animate({scrollTop: $('#voteHeader').offset().top}, 2500); $('html, body, #container').animate({scrollTop: $('#voteHeader').offset().top}, 2500); $('.scrollable').animate({scrollTop: $('#voteHeader').offset().top}, 2500); $(".scrollable").animate({ scrollTop: $("#voteHeader").scrollTop() }, 2500); Any thoughts on what I can do to be able to scroll down the page using javascript? I'm using jQuery 1.8.2, jQuery Mobile 1.2.0, and Phonegap 2.2.0 (via Build). Thank you! -Mark

By: Mayank

Mayank — Thu, 07 Feb 2013 04:02:20 +0000

wow brilliant nice work i really appreciate this. keep it up.