0

私の過剰設計されたウェブアプリ：

  • URLでを使用せずに、URL間の移動をアニメーション化するための使用history.pushStateとイベント。popState#
  • 外側のdivを使用してスクロールバーを処理し、htmlとbodyには。がありoverflow:hiddenます。これは、ユーザーがクリックして戻ったときに、左にアニメーション化する前に上にジャンプしないようにするためです。

ここで私の質問は、ユーザーが[進む]ボタンをもう一度クリックした場合、スクロールした場所を保持したり、元の場所にスクロールして戻したりする方法です。

  • 私の最初の考えは、history.stateオブジェクトをスクロール位置を保存する場所として使用し、ユーザーが前方にクリックしたときにそれをロードすることです。（オブジェクトreplaceStateのない最初のページに移動する必要がありhistory.stateます。）このアイデアの問題は、ユーザーがクリックして戻ると、scrollTopを現在の状態に追加するためのアクセス権がなくなることです。

  • 次のアイデアは別の配列を使用することなので、インデックスでスクロール位置を取得しますが、問題は、ユーザーがタブを閉じてから再度開いた場合、または別のサイトに移動して戻ってきた場合です。後でマイニングするために、それらの前後の履歴は保存されますが、scrollTopsの個別の配列は失われます。

あなたの提案は何ですか？

4

3 に答える 3

1

すでに述べたように、履歴 API の状態オブジェクトを使用して、ページの現在の状態 (スクロール位置やフォーム フィールド エントリなど) を追跡できます。

もちろん、ある時点で、ページの状態を履歴状態オブジェクトに保存する必要があります。ただし、ブラウザーが popstate イベントを発生させたときは、以前の履歴状態がポップされた状態に既に置き換えられているため、既に手遅れです。

そのため、popstate イベントの前にページの状態を保存する必要があります。ただし、beforepopstate イベントがないため、これを行う唯一の方法は、ページの状態の変化 (スクロールや入力イベントなど) を常にリッスンし、replaceState で現在の履歴状態オブジェクトを常に更新することです。

ただし、Chromium ベースのブラウザーでは、replaceState を呼び出すたびに、読み込みインジケーターが短時間ユーザーに表示されます。これを望まない場合は、popstate イベントの後に一度 replaceState を呼び出してください。この呼び出しでは、一意の ID を履歴状態オブジェクトに保存します。この一意の ID をキーとして使用して、ブラウザのセッション ストレージにさらに状態を保存します。(エントリが状態になる可能性があるため、キャッシュをモデル化する必要があります。)

于 2013-05-19T19:56:14.880 に答える