javascript - フォーカスされた要素を変更すると、スクロールイベントがトリガーされます

Question

キーボードナビゲーションを有効にしたhtmlテーブルがあります。テーブル内の各tdにはtabIndex="1"があり、各tdのonkeydownイベントのハンドラーを追加しました。ハンドラーで、keydownedのtd行と列番号を計算し、押された矢印キーに従って新しい行/列番号を計算してから、focus（）を実行します。関数は次のとおりです。

function pivotKeyDown(event, element) {
    var elementToSelect = event.srcElement ? event.srcElement : (event.target ? event.target : event.toElement);
    var row, col, t = $(elementToSelect);
    currentCol = t.index();
    currentRow = t.closest('tr').index();

    switch (event.keyCode) {
        case 37:
            t.closest('table').find('tr:nth-child(' + (currentRow + 1) + ')').find('td:nth-child(' + (currentCol) + ')').focus();
            break;
        case 38:
            t.closest('table').find('tr:nth-child(' + (currentRow) + ')').find('td:nth-child(' + (currentCol + 1) + ')').focus();
            break;
        case 39:
            t.closest('table').find('tr:nth-child(' + (currentRow + 1) + ')').find('td:nth-child(' + (currentCol + 2) + ')').focus();
            break;
        case 40:
            t.closest('table').find('tr:nth-child(' + (currentRow + 2) + ')').find('td:nth-child(' + (currentCol + 1) + ')').focus();
            break;
    }
    return false;
}

通常、テーブルは大きすぎてページに表示できないため、テーブルが大きすぎる場合はスクロールバーを表示するdiv内に配置されます。

ここで問題となるのは、キーを使用してナビゲートすると、フォーカスされたセルが変化し、ビューポートの境界を越えると、テーブルがdiv内に移動します（新しく選択したセルが表示されるように）が、移動しませんスクロールイベントをトリガーします。スクロールバーは変更されないため、テーブルの右下のセルが選択されていても、スクロールバーの位置は左上のセルが選択されているかのようになります。これを修正する方法はありますか？または、セルの選択を手動でトレースして、スクロール位置を自分で更新する必要がありますか？