16

リスト項目をクリックして別のページに移動すると、現在のページが画面の上部にジャンプしてから次のページに遷移します。

この問題は jQM 1.2 で発生し、新しくリリースされた 1.3 バージョンではまだ修正されていません。

一番上へのスクロールを防ぐ方法を知っている人はいますか?戻るボタンを使用するときのスクロール位置を覚えていますか?

この煩わしい動作は容認できず、アプリ全体のエクスペリエンスが損なわれます。

iOS 6.1.2 を搭載した iPhone 4S で Web アプリケーションとして使用しています。

4

6 に答える 6

9

これを（iOSの場合）次の方法で修正できました。

  1. スクロール パーツ用のコンテナ div を追加します。通常、ページのスクロール部分を囲みます。私の場合、ヘッダーの直後とフッターコードの前です。

  2. 次の CSS を追加します。

    .extracontainer {
  幅: 100%;
  高さ: 100%;
  位置: 絶対;
  上: 0;
  右: 0;
  下: 0;
  左: 0;
  マージン: 0;
  パディング: 0;
  オーバーフロー: 自動;
  オーバーフロー-y: スクロール;
  -webkit-overflow-scrolling: touch;
}

一部の CSS は余分かもしれませんが、私の場合は、負のマージンやパディングなどを使用している他のスタイルの問題を回避するためでした。

また、-webkit-overflow-scrolling: touch;があることを確認してください。スムーズなスクロールを実現します。

これが役立つことを願っています。

于 2013-07-01T03:21:47.057 に答える
9

理解する必要がある利用可能なソリューションについて説明する前に、これはエラーではなく、完璧なソリューションもありません。問題は、別のページへの移行をアニメーション化するには、現在のページと移行中のページが垂直に並ぶように、ビューポートをページの上部に配置する必要があることです。

1 つのページ (たとえば 1000 ピクセル) の長いリストの途中にあり、転送先のページの高さが数百ピクセルしかない場合、現在のページは画面から適切にアニメーション化されますが、新しいページは次のように表示されません。ビューポートの上になります。

実行可能な解決策は 2 つあります。

1. iScroll とその jQuery Mobile 派生 iScrollview

iScroll ホームページ: http://cubiq.org/iscroll-4

iScrollview ホームページ: https://github.com/watusi/jquery-mobile-iscrollview

iScroll は、iPhone や Android などのモバイル デバイスのネイティブ スクロールと非常によく似た動作で、Web ブラウザー内のウィンドウ内のコンテンツをスクロールできる JavaScript です。これは、ネイティブのようなスクロールバーと物理演算を使用して、ブラウザー内でウィンドウをスクロールできることを意味します。

これは、現在の問題の解決策でもあります。iScroll の実装により、リストビューがどれだけスクロールされても、ページはページの高さの 100% を占めます。これは、返されたリストビューが同じ位置に留まる理由でもあります。

もちろん、このソリューションを実装したい場合は、iScrollview 実装を選択する必要があります。iScroll を実装することはできますが、もっと時間がかかります。

2.サイレントスクロール

公式ドキュメント: http://jquerymobile.com/demos/1.1.0-rc.1/docs/api/methods.html

この jQuery Mobile 機能は、そもそもこの問題が発生する理由と同じです。ページ遷移がトリガーされる前に、元のページが静かに一番上にスクロールされます。

私たちの場合、リストビューが選択されている場合、ページが変更される前に、その位置を記憶する必要があります (ここでは、ページ遷移中に保存されているデータ/パラメーターの解決策を見つけることができます。ページ遷移間のデータ/パラメーター操作の章を検索するだけです)。その場合、前のページに戻ったときにpagebefpreshowイベントを使用して、ページが表示される前に静かに一番下までスクロールできます。

//scroll to Y 100px
$.mobile.silentScroll(100);

そして、ここにサイレントスクロールの実例があります: http://jsfiddle.net/Gajotres/5zZzz/

より詳しい情報

このトピックについて詳しく知りたい場合は、この記事をご覧ください。実際の例も見つかります。

于 2013-03-06T20:10:21.160 に答える
1

Jquery Mobile 1.4.5 の場合、jquery.mobile-1.4.5.min.js の次の行を変更して修正しました。

a.mobile.hideUrlBar&&g.load(a.mobile.silentScroll)

これに：

a.mobile.hideUrlBar

于 2015-07-22T18:46:59.073 に答える