8

phonegap を使用してアプリを作成しています。画面の下部からメニューを上にスワイプしたときに、バックグラウンドで div のスクロールを無効にしたいと考えています。

オーバーフローをスクロールから非表示に変更すると、メニュースワイプがアクティブになる理由が機能しますが、画面がちらつきます。

オーバーフロー プロパティが変更されたときに div のちらつきを止めるためのハック アラウンドを知っている人はいますか?

4

3 に答える 3

6

ちらつきバグは、スマートフォンの GPU メモリに関連しています。メモリ (VRAM) には限りがあり、要素が複雑すぎたり、メモリよりも大きい場合は、使い果たされます。CyanogenMod rom を搭載した android では、画面内の色で GPU 処理を表示できます。緑 (使用率が低い) から赤 (GPU の使用率が高い) まで。デモ画像. しかし、IOS 用の同様のツールが存在するかどうかはわかりません。

これは、アプリのすべてのトランジションで、または GPU を使用するときに表示されます。

とにかく、要素の複雑さを削除/削減するか、ここからこれを試すことができます:

オプション1

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

オプション 2 これ:

.ui-page {
    -webkit-backface-visibility: hidden;
}

オプション 3 これ:

.ui-mobile, .ui-mobile .ui-page, .ui-mobile [data-role="page"],
.ui-mobile [data-role="dialog"], .ui-page, .ui-mobile .ui-page-active {
      overflow: hidden;
      -webkit-backface-visibility: hidden;
}

.ui-header {
    position:fixed;
    z-index:10;
    top:0;
    width:100%;
    padding: 13px 0;
    height: 15px;
}

.ui-content {
    padding-top: 57px;
    padding-bottom: 54px;
    overflow: auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.ui-footer {
    position:fixed;
    z-index:10;
   bottom:0;
   width:100%;
}

または、トランジションを削除するだけです (問題がトランジションにある場合):

オプション 4 

'-webkit-transition': 'none !important',
'-moz-transition': 'none !important',
'-o-transition': 'none !important',
'-ms-transition': 'none !important',
'transition': 'none !important'
于 2013-07-19T13:39:34.823 に答える
3

-webkit-backface-visibility: hidden;ページに複数のスクローラーがある場合、 which worksを使用したソリューションはパフォーマンスの問題を引き起こすようです。古い iPad の Safari は CPU の限界に達し、ブラウザをクラッシュさせていました。

ページの表示と非表示のイベントで問題のあるスタイルのクラスを追加および削除することで、SPA (リストに最大 100 個のスライダーを含めることができます) で機能するソリューションを見つけました。

.touchslide {
    -webkit-overflow-scrolling:touch;
}

(jQuery スタイルの疑似コードを使用) ページを離れるときは、クラスを削除します

selector.removeClass("touchslide");

次に、ページの読み込み時に:

   selector.addClass("touchslide");
   selector.scrollLeft(0);

iOS でスクロール イベントをトリガーする必要があるため、最初のスクロールには慣性効果がないため、html オブジェクトをターゲットにして scrollLeft に追加します。

于 2014-08-15T11:37:21.383 に答える