infinite scroll採用のリンク遷移の問題点と対応

TwitterPinterestにて、画面最下部までスクロールすると、自動的に次のページを読み込む仕組みがある。これのことをinfinite scroll、無限スクロールと呼んだりする。これをなぜ多くのWebサイトが採用しないのか、疑問に思っていた。

よく考えてみると、このinfinite scrollを使うためにはサイト側で対応する必要がある。その理由はリンクによって次のページに移動してはならない、という制限があるからだ。ブラウザの「戻る」ボタンで戻った際に、以前の押したリンクの場所まで戻ることができない。

無限スクロールを必要とする程の長いコンテンツ一覧からコンテンツに飛ぶということは、戻った場合には長いコンテンツ一覧にて先ほど飛んだ場所に戻って欲しいものだ。これを実現できない場合、不便になり、無限スクロール採用するメリットが消えてしまう。

これに対して、各社は対応を行なっている。

例えばTwitterは140文字制限であり、コンテンツ一覧に入れ込むことができる。外部のリンクは、新しいウィンドウを開いて表示するようにしている。

Pinterestはコンテンツをクリックすると、ページ遷移をせずに、ページ上にオーバーレイ表示(pop)するようにしている。

よって、既存のコンテンツに対して無限スクロールを採用する場合は、

  • ページ遷移をする場合は新しいウィンドウを開くように強制する
  • ページ上にオーバーレイ表示するようにする

などの対応が必要になるはず。