1

無限スクロールまたは「さらに結果を読み込む」ボタンを使用して検索結果を実装するとします。これにより、最初の結果ページにさらに多くの結果が表示されます。そのため、ユーザーは同じ検索結果ページを離れずに結果を移動できます。

ユーザーはしばらくスクロールした後、特定の結果を見つけてクリックします。それは彼らが必要としているものではないので、クリックして戻ってきます。

結果ページを離れたときの状態に戻し、ページを正しい場所までスクロールダウンさせるにはどうすればよいですか? 最初の検索で 10 件の結果が生成された可能性があります。さらに 20 件を読み込むと、ページ上で 30 件になり、ページを離れたときに結果 23 にスクロールされたとします。

これを行うための受け入れられた方法は何ですか?

(これは検索結果に固有のものではないことに注意してください。一般に、ブラウザにロードされた後にページをいじった場合、ユーザーが戻ってきたときにこのページの状態を保持/再構築するにはどうすればよいですか?)

4

2 に答える 2

0

この問題には複数のアプローチがあります。

  • 検索結果を扱っているとしましょう。より多くの結果をビューにロードするたびに、次の検索結果の開始インデックスが上昇します。

    10 要素の 3 回目のロードの後、開始インデックスは 40 になります。

    これで、このインデックスをハッシュとして動的に URL に入れることができます。たとえば、http://mysite.com/search?q=searchterm#startindex=40. これで、ユーザーが検索結果をクリックしてから戻ると、URL からその値を抽出し、適切な量の追加結果をビューに読み込むことができます。
    必要に応じて、ユーザーを最後の位置までスクロールします。

    この原則は、Cookie、localStorage、セッション パラメータ、または URL ハッシュの代わりに使用するものと同様に機能します。

  • クライアント側の完全な検索結果を localStorage などに保存し、(「戻る」ボタンの後に) そこから読み取り、ページに挿入することができます。これにより、サーバーから再度リクエストする必要がなくなり、反応性が向上する可能性があります。

    この時点で、ユーザーのスクロール位置を保存および復元して、ユーザーをページ上の位置に戻すこともできます。

私は現在、同様の問題に取り組んでおり、アプローチ番号 2 を使用すると思います。

于 2012-08-03T13:33:59.290 に答える
-1

1 つの方法は、ブラウザをプログラムでシミュレートすることです。JavaScript 履歴オブジェクトを使用します。次のように、ボタンを配置してクリック時に go() 関数を呼び出すことができます

history.go(-1)

これにより、前のページに移動するだけです。

詳しくはこちらをご覧ください。

于 2012-04-18T03:11:14.583 に答える