5
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Ajaxのページネーション「もっと見る」がブラウザバックで勝手に閉じる問題

Last updated at Posted at 2016-12-08

概要

表題の件でイライラしていたのですが、HistoryAPIで無理やり解決しました。
が、結論から言うとこのやり方はオススメしません!笑
Amazonに倣って、
「もっと見る」よりも、素直に「次のページ」を表示しましょう。

問題

  1. ajax実装された「もっと見る」を押して、リスト末尾に20件とか追加される。
  2. リストからアイテムを選び、アイテム詳細ページに遷移。
  3. ブラウザバックする。
  4. DOMの状態が初期化されているので、末尾に追加された20件は消えている。
    →もっと奥にあるアイテムを見るには、また「もっと見る」を押さないといけない。

イライラする!!

解決方法

  1. 詳細ページに遷移するタイミングで、現在開かれているページ数をURLに追加し(?page_num=2)として、HistoryAPIで履歴に追加もしくは書き換え。
  2. 「戻る」を押すと「hogehoge.com/items?page_num=2」が開かれるので、(page_numの値x20)件を初期表示。
  3. 併せて「もっと見る」押下時に追加されるリストのoffsetを(page_numの値x20+1)に変更する。

結論

ゴリ押しですが、ブラウザバック時のイライラは無くなります。

が!!
ここで無理やり頑張るぐらいなら、
「もっと見る」では無く「次のページ」を表示して、AjaxでDOMとブラウザ履歴を書き換えてしまえば良さそう。
AmazonのUIが実装しやすそうで、かつユーザーとしても快適。

5
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?