読者です 読者をやめる 読者になる 読者になる

ショートカットキーでスクロールしながら要素間を移動する(JavaScript)

[programming] JavaScript
スポンサーリンク

TwitterやGmail、LDRなどで提供されている、ショートカットキー(j/k)で要素をスクロールしながら移動していくインタフェースですが、element.scrollIntoView を使うと、結構簡単にそのようなインタフェースが出来ます。

(最初はこれを知らずに、その要素の絶対位置を取得してスクロールさせるようなものを作ろうとしてしまいました…)

概要

scrollIntoView() メソッドは、要素が(ブラウザのウィンドウ上の)表示範囲に入るまでページをスクロールします。

構文

element.scrollIntoView(alignWithTop);
alignWithTop Optional
true を指定した場合、要素が上端に来るようにスクロールする(※指定を省略した場合のデフォルトの動作)
false を指定した場合、下端に来るようにスクロールする。

element.scrollIntoView - DOM | MDN

 documentのkeydownイベントでキーをハンドリングして、j/kで次の要素を取り出してscrollIntoViewを呼び出すだけです。

elements scroll by jk shortcut

registerJumpElements の引数で、移動したい要素のリストを渡すことにより、j/kで移動するようになります。

たとえば、Googleの検索結果のページだと、検索結果のリストに対して"g" というclassが振られているので、、

registerJumpElements(document.getElementsByClassName('g'));

とすると、設定できます。