Permalink
Browse files

Add a post

I neglected add a post in 6dd708f, where I just added an image.
  • Loading branch information...
vzvu3k6k committed Apr 27, 2014
1 parent 6dd708f commit 955f3273b38b9be8dfb5ca83c3c0c358c34791b6
Showing with 42 additions and 0 deletions.
  1. +42 −0 _posts/2014-04-27-better-infinite-scroll.md
@@ -0,0 +1,42 @@
---
layout: post
title: 無限スクロールの問題点と解決方法
---
無限スクロールとは、ページの下部までスクロールすると自動的に新しい要素が追加される機能のこと。TwitterなどのSNSのタイムラインを初めとして様々なウェブサイトで使われているが、いくつかの問題点も指摘されている。
無限スクロールのよく知られた問題点と、それに対する解決方法をまとめた。
## permalinkが取れない
同じページに次々と新しい内容が継ぎ足されていくので、いま自分が見ているページのURLが分からないという問題。
### History APIでURLを書き換える
スクロール位置に応じてHistory APIでURLを書き換える。
[We Heart It](http://weheartit.com/)が実装している。
### リンクを追加する
次のページを追加する際にpermalinkも追加する。
[AutoPagerize](http://autopagerize.net/)(任意のウェブサイトに無限スクロール機能を追加できるブラウザ拡張)はこの方式を取っている。
## ページを飛ばせない
ページの最下部までスクロールすることでしか次のページを表示できない場合、何ページか飛ばして読んだりすることができない。
### ナビゲーションを追加する
[We Heart It](http://weheartit.com/)ではページの右下にこのようなナビゲーションを設けている。テキストボックスにページ番号を入力してEnterを押すとそのページに移動できる。
![]({{ site.baseurl }}img/better-infinite-scroll-navigation.png)
## メモリーが食い潰される
[Tumblrの省メモリーな無限スクロール]({{ site.baseurl }}2014/04/26/tumblr-ghostlist.html)を参照。
## 参考
* [第2回 スクロールとページングのUIを考える(2):フロントエンドWeb戦略室|gihyo.jp … 技術評論社](http://gihyo.jp/dev/serial/01/front-end_web/000202?page=2)

0 comments on commit 955f327

Please sign in to comment.