1

いくつかの JavaScript スライドショー、大量の CSS、アニメーション化されたメニュー、および CSS トランジション アニメーションを含む Web ページを作成しています。また、iPad ではページの高さが非常に長くなります。ユーザーがクリックすると、次を使用してページ上の特定の場所にスクロールするナビゲーションメニューがあります。

var $viewport = $('html:not(:animated),body:not(:animated)');
    $viewport.animate({scrollTop: dest}, 2000, function(){menu_scrolling=false;});

私のウェブページは、Firefox、Chrome、Safari でテストした MacBook Pro でシルクのようにスムーズにスクロールできますが、iPad では地獄のように途切れ途切れになり、まるでアニメーションをスキップしたかのようで、ピンチ ズームも遅れています。jQuery scrollto プラグイン、jquery-animation 拡張プラグインを試しましたが、これらはすべて iPad でラグが発生します。iPad でリッチメディア Web ページをスムーズにスクロールするためのメニューを作成する最良の方法は何ですか?

4

1 に答える 1

0

1 つのアイデアは、CSS トランジションに依存し、できればハードウェア アクセラレーションをトリガーすることです。

申し込むと言う

transition: all ease 0.5s;

あなたのコンテナに、次のようなことをしてください

$container.css( 'transform', 'translate3d(0,' + offsetValue + 'px,0)' );

完了したら、変換を削除し、scrollTop を適切な値に設定して、ユーザーが手動でページを上下にスクロールできるようにします。iOS6 でハードウェア アクセラレーションをトリガーするには、これを簡単に見てみましょうhttp://indiegamr.com/ios6-html-hardware-acceleration-changes-and-how-to-fix-them/

于 2013-02-19T22:43:33.037 に答える