TwitterやGmail、LDRなどで提供されている、ショートカットキー(j/k)で要素をスクロールしながら移動していくインタフェースですが、element.scrollIntoView を使うと、結構簡単にそのようなインタフェースが出来ます。
(最初はこれを知らずに、その要素の絶対位置を取得してスクロールさせるようなものを作ろうとしてしまいました…)
概要
scrollIntoView()
メソッドは、要素が(ブラウザのウィンドウ上の)表示範囲に入るまでページをスクロールします。構文
element.scrollIntoView(alignWithTop);
alignWithTop
Optionaltrue
を指定した場合、要素が上端に来るようにスクロールする(※指定を省略した場合のデフォルトの動作)
false
を指定した場合、下端に来るようにスクロールする。
documentのkeydownイベントでキーをハンドリングして、j/kで次の要素を取り出してscrollIntoViewを呼び出すだけです。
elements scroll by jk shortcut
registerJumpElements の引数で、移動したい要素のリストを渡すことにより、j/kで移動するようになります。
たとえば、Googleの検索結果のページだと、検索結果のリストに対して"g" というclassが振られているので、、
registerJumpElements(document.getElementsByClassName('g'));
とすると、設定できます。