HTMLタグにtabindexを付与してtabキーでのフォーカス移動はできたのですが、フォーカス位置の高さを画面の中央にしたいのですが、どうすればよろしいでしょうか？

Question

<input tabindex=1 type="checkbox">
<br>
<input tabindex=2 type="checkbox">
<br>
<input tabindex=3 type="checkbox">

例えばこういった具合でtabキーを押すことによってどんどんフォーカスの位置をずらして表示させていくことはできました。
ただ、水平位置が常に画面の中央にフォーカス位置を表示しているわけではないので、
そこで、フォーカス箇所の高さ、水平位置は常に画面の中央にして
tabで進んでも、shift + tabで戻るにしても
中央で表示しながらスクロールとしたいのですが、

html、css、javascript、jquery、このあたりかと想像し
フォーカス常に中央表示、などでネット検索を行ってみるものの
それらしき該当箇所を見つけることはできず、
なんとか方法をご教授願いたいのですが、すみません・・
よろしくお願い致します。

Comments

[yoshinavi]

問題の状況が分かり易い具体例を提示されると良いかと思います。

Answer 1

$(function(){
  $('input').focus(function(e) {
    var h = $(window).height() / 2;
    var t = $(this).offset().top;
    if (t - h > 0) {
      $(window).scrollTop(t - h);
    }
  });
});

Answer 2

$(document).on('focusin', function(event) {
  event.target.scrollIntoView({
    block: 'center',
    behavior: 'smooth' // わかりやすいように
  });
});

https://developer.mozilla.org/ja/docs/Web/API/Element/scrollIntoView

Answer 3

画面の中央にスクロールするには無駄な余白を相当つくらないとできません
ユーザビリティが落ちるのでやめたほうがよいでしょう。
それでもやるならこんな感じですか？

<script>
$(function(){
  $('.fuga').on('focus',function(){
    $(window).scrollTop($(this).offset().top-window.innerHeight/2);
  });
});
</script>
<style>
.hoge{height:999px}
</style>
<div class="hoge">
</div>
<div class="hoge">
<input tabindex=1 type="checkbox" class="fuga">1
</div>
<div class="hoge">
<input tabindex=2 type="checkbox" class="fuga">2<br>
<input tabindex=3 type="checkbox" class="fuga">3<br>
<input tabindex=4 type="checkbox" class="fuga">4<br>
</div>
<div class="hoge">
<input tabindex=5 type="checkbox" class="fuga">5
</div>
<div class="hoge">
</div>

Comments

[think49]

ユーザビリティ的には「ブラウザのデフォルト機能のtabキー移動に最適化した人がgugupooさんのサイトを訪れた時、gugupooさんのサイトでのみ目線の移動先を最適化し直さなければならない」という問題がありますね。
この手のデフォルト機能乗っ取りは、実装者にとっては改善ですが、全体の利にはなっていないことが多いように思います。