フォーカスのある位置を表示したい

Question

スクロールが発生する画面でTab遷移させるのですが、
場合によってはフォーカスが当たっている項目が画面内に表示されていないことがあると思います。
もちろん、スクロールさせればその項目は表示できますが、
フォーカスのある項目が常に画面内に表示するように
自動スクロールさせることは可能でしょうか？

Answer 1

あまり良いサンプルではないんですけれども、こんな感じにできなくもないです。

サンプル | jsFiddle

h2のいずれかを最初にフォーカスしておいて下さい。
8まで行ったらshift+tabでtabを戻れます。そのまま進むとtabのfocusが画面内のどこかにいってしまいます。
タブの移動の方が早いのでスクロールが発生しないことも。

これらはtabindex属性を入れているからだろうと思いますが、ここらが上手くできるのであればそのoffsetを調べて後は自動スクロールと言う感じでイケるんじゃないかなぁと思ったり。

結局、今どこに向かうのか、あるいはどこにターゲットがあるかがわかれば良いだけかと思います。それをどのように設定するか(どのように設定しているか)は質問にないので、再現できません。

あくまで解決の回答ではなく、アイデアの一つとして。