現在フォーカスされている要素がコンテナの中央に表示されるように、Javascript scrollIntoView 関数を使用してコンテナをスクロールしています。
addEventListener を使用して矢印キーをリッスンし、フォーカスしたい要素を変更します。次に、scrollIntoView を起動して、現在フォーカスされている要素にスクロールします。
フォーカスされた要素をゆっくりと変更すると、これはうまく機能しますが、フォーカスされた要素をすばやく変更し始めると、スクロールが「ほぼ」停止し、フォーカスされた要素の変更を停止するまで待機し、その要素がコンテナの中央に配置されます。
これは Google Chrome でのみ発生します。私は Firefox でテストしましたが、フォーカスされた要素をどれだけすばやく変更しても完全に機能します。
提案は他のブラウザと互換性がある必要はありません。また、この問題を解決するために Google Chrome の設定を変更することも問題ありません。これはローカルでの個人的な使用のみであり、Google Chrome を使用してのみ実行するためです。
考えられる問題
よくわかりませんが、Google Chrome は scrollIntoView を Firefox などとは異なる方法で処理していると思います。すぐに呼び出して、前のスクロールがまだ終了していない場合、実行の途中で前の scrollIntoView を停止します。これにより、要素がコンテナの中央に配置されず、scrollIntoView が再度呼び出され、計算が再実行されて現在のスクロール位置と、現在フォーカスされている要素をコンテナの中央に配置するために必要なスクロール量。複数の呼び出しが行われた場合、scrollIntoView 呼び出しへの最後の呼び出しのみが完全に実行されます。これは、scrollIntoView 呼び出しが完全に終了していないことがスクロールの遅延を引き起こしていることを意味します。
scrollIntoView オプション:
elementCurrentlyOnFocus.scrollIntoView({behavior:"smooth",block:"center"});
コードをテストしたブラウザ:
Chrome バージョン: 76.0.3809.100 (ラグ)
Firefox バージョン: 68.0.2 (スムーズ)