QA@IT

Pinterestの画像一覧のような一覧ページ<=>詳細ページのような行き来をするUIはどのように実装するのでしょうか?

2394 PV

Pinterestのように一覧ページの画像をクリックして、画像詳細表示(URL変更)後、ブラウザバックで戻ると画像詳細表示が消え、元の一覧ページが画像をクリックする前のそのままの状態で表示されるようなUIはどのように実装するものなのでしょうか?

現在はjQuery PluginのColorBoxで画像詳細表示、window.history.pushStateでURLの変更などは出来ているのですが、画像詳細表示をした際にスクロールバーが一覧ページの状態のままになってしまっていたり、ブラウザバックで戻った際にURLは一覧ページのものへ戻るのですが、画像詳細表示が画面上にそのまま残ってしまっていたりしています。

何か有用なプラグインやアドバイスがあれば教えて頂ければと思います。
(開発はRuby on Rails3.2.8で行っています。)

回答

ブラウザのスクロールバーはモーダルウィンドウのonOpenとonClosedのタイミングでbodyタグに
overflow:hidden;
をつけたり外したりしてブラウザのスクロールバーを隠しているようです。(なので詳細表示中も実質のスクロール位置は変わっていない)

モーダルウィンドは入れ子になっていて、一番外側のdiv要素に
position:fixed;
width:100%;
height:100%;
overflow-y:scroll;
を設定してブラウザではなくdiv要素のスクロールバーを出しているようです。

という仕様なので、モーダルウィンドウや背景のオーバーレイのレイヤーなどをbody直下に自動生成しているColorBoxはそのままでは実現が難しそうで、入れ子になるように手を加える必要がありそうです。(良いプラグインを知ってたら良かったのですがちょっとこの用途で使えそうなものが思いつかず・・・)
あと、AjaxでブラウザのURLを変えるのはjQuery Addressを使うと簡単で良いですよ。

編集 履歴 (0)
  • ありがとうございます。その発想は無かったという感じです。。 -
ウォッチ

この質問への回答やコメントをメールでお知らせします。