0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

「もっと見る」ボタンを持つ無限スクロールの一覧画面から詳細画面に遷移して一覧画面にバックしたら一覧画面の元の位置に戻りたい

Last updated at Posted at 2024-11-22

元の位置に戻れなくなる理由

もっと見るを押して一覧表示件数が増えたことで初期表示時より縦長な画面に変わっているのに、バックした際には初期表示時の表示件数に減っていて元の場所の座標が存在しなくなっているから
(元の場所の座標が存在していればブラウザがそこまでスクロールしてくれる)

対策

一覧画面を、URLパラメータに「表示件数」が指定されていたらその件数分表示する、ように作っておく
(指定されてなかったらデフォルト件数(10件とか)を初期表示件数とする)

一覧の最下部のもっと見るボタンを押した際に一覧表示件数が増えるので、最新の表示件数を現URLのパラメータにセットしておく

// もっと見る押下時にブラウザのアドレスバーのURLに最新表示件数パラメータをセット
const locationUrl = new URL(location.href); // 現URL
locationUrl.searchParams.set('<表示件数パラメータ名>', 最新の表示件数);
history.pushState({}, '', locationUrl); // ブラウザのアドレスバーが書き換わる

これをやっておくと、詳細に遷移してから一覧にバックした際に表示件数パラメータ付きのURLにバックするので、詳細遷移直前の表示件数すなわち縦長な画面が復元される

0
0
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
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?