Phonegap vertical scroll

Question

I am building a phonegap app for ios and have vertical scroll issue. There appears to be a few pixels scroll in the webview even without any content and this is affecting my abs

Answer 1

This solved it for me (on iOS at least - may have other compatibility things on other platforms)

Try removing width=device-width, height=device-height from your meta at the top.

It's an issue with the device not factoring for the status bar at the top as far as I can tell.

Answer 2

For a latest answer (as of 2016), this solution was the most effective (smooth scrolling) for me in Cordova iOS.

.element {
  overflow-y: scroll; /* has to be scroll, not auto */
  -webkit-overflow-scrolling: touch;
}

Source: https://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/

Answer 3

This might help:

body {
    height: 100%;
    overflow: hidden;
}

Answer 4

Try hiding the System Tray, it did the trick for me.

On MainPage.xaml, set "IsVisible" to false.

shell:SystemTray.IsVisible="False" d:DesignHeight="768" d:DesignWidth="480"

Answer 5

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
}

<meta name="viewport" content="user-scalable=no, initial-scale=1, minimum-scale=1, width=device-width" />

And in config.xml:

<preference name="DisallowOverscroll" value="true" />

Above are settings I found to be the best start for handling scroll on iOS. Then, just add 'overflow: auto' to any element you need to scroll. Use overthrow or iscroll to help support iOS < 5, android < 3, and and so on.

Answer 6

None of above fixed my problem but below link. In my case, there was an excessive gap below the content which could not be explained and this gap was causing the scrollbar.

Here is the link: https://github.com/phonegap/phonegap/wiki/Prevent-Scrolling