CODEWITHSUNDEEP
cordova
jamie holliday
jamie holliday

Reputation: 1627

Phonegap vertical scroll

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 absolutely positioned nav bar and tab bar built in html

Here is the html page I have - there is no content by I still get the scroll amount shown in the image:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <title>My App</title>
    </head>
    <body>

        <script src="scripts/vendor/cordova-2.4.0.js"></script>
    </body>
</html>

scroll screenshot http://img20.imageshack.us/img20/5140/screenshot20130225at212.png

Upvotes: 4

Views: 24428

Answers (6)

dariru
dariru

Reputation: 501

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/

Upvotes: 1

Cancian
Cancian

Reputation: 1

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"

Upvotes: 0

G&#246;khan Şeng&#252;n
G&#246;khan Şeng&#252;n

Reputation: 623

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

Upvotes: 0

Noogen
Noogen

Reputation: 1652

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.

Upvotes: 15

jocull
jocull

Reputation: 21085

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.

Upvotes: 7

ThinkingStiff
ThinkingStiff

Reputation: 65341

This might help: 

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

Upvotes: -2

Related Questions