cordova - Phonegap垂直スクロール

Question

iOS用のphonegapアプリを作成していますが、垂直スクロールの問題があります。コンテンツがなくてもWebビューに数ピクセルのスクロールがあるように見えます。これは、HTMLに組み込まれている絶対位置のナビゲーションバーとタブバーに影響を与えています。

これが私が持っているhtmlページです-画像に表示されているスクロール量をまだ取得しているため、コンテンツはありません：

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

スクリーンショットをスクロールhttp://img20.imageshack.us/img20/5140/screenshot20130225at212.png

score 15 · Accepted Answer

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" />

そしてconfig.xmlで：

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

上記は、iOSでスクロールを処理するための最良のスタートであると私が見つけた設定です。次に、スクロールする必要のある要素に「overflow：auto」を追加するだけです。転覆またはiscrollを使用して、iOS <5、android<3などをサポートします。

score 7 · Accepted Answer

これは私のためにそれを解決しました（少なくともiOSでは-他のプラットフォームで他の互換性があるかもしれません）

width=device-width, height=device-height上部のメタから削除してみてください。

これは、私が知る限り、上部のステータスバーを考慮していないデバイスの問題です。

score 1 · Accepted Answer

最新の回答（2016年現在）では、このソリューションは、Cordova iOSで私にとって最も効果的（スムーズなスクロール）でした。

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

ソース： https ：//css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/

score 0 · Accepted Answer

上記のどれも私の問題を修正しませんでしたが、リンクの下にあります。私の場合、コンテンツの下に説明できない過度のギャップがあり、このギャップがスクロールバーの原因でした。

リンクは次のとおりです： https ：//github.com/phonegap/phonegap/wiki/Prevent-Scrolling

score 0 · Accepted Answer

システムトレイを非表示にしてみてください、それは私のためにトリックをしました。

MainPage.xamlで、「IsVisible」をfalseに設定します。

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

score -2 · Accepted Answer

-2

これは役立つかもしれません：

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

于 2013-02-25T21:44:31.627 に答える

cordova - Phonegap垂直スクロール

6 に答える 6

Related

Reference