上下键，表格突出显示行，当到达底部时移动滚动

Question

注意： - 已经有很多类似的问题，但不是我想要的。

我在div中有一个表，我使用JQuery选择使用向上和向下键的行，并且工作正常。

但是当达到div时，所选择的行就会失焦（在滚动条内部）。我不想在滚动条到达滚动结束时始终将滚动条移动到顶部。

但是选择行只在div之上。

<div id="abc" style="height:100px;overflow-y:scroll;">
    <table id="data" border="1" cellspacing="1" cellpadding="1">
      <thead>
        <tr>
          <th>#</th>
          <th>header2</th>
          <th>header3</th>
          <th>header4</th>
          <th>header5</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>data</td>
          <td>data</td>
          <td>data</td>
          <td>data</td>
        </tr>
     </tbody>
    </table>
 </div>

JQuery代码

window.onload = function() {

  var $tbody = $("#data tbody").on('click', 'tr', function() {
    highlight($(this));
  });


  function gotoNext() {
    var $next = $tbody.find('.highlight').next();
    highlight($next);
  }

  function gotoPrevious() {
    var $prev = $tbody.find('.highlight').prev();
    highlight($prev);
  }


  $(document).keydown(function(e) {
    if ($tbody.find('.highlight').length) {

      if (e.which == 40) { //down arrow
        gotoNext();
      } else if (e.which == 38) { //up arrow
        gotoPrevious();
      }
    }
  });


  function highlight($row) {
    if ($row.length) {
      $tbody.children().removeClass("highlight");
      $row.addClass('highlight');
      scrollIntoView($row,"#abc")
      //$("#rownum").val($row[0].rowIndex);
    }
  }

  function scrollIntoView(element, container) {
        var divHeight = $('#abc').height();
        var elemTop = element.offset().top;
        var elemBottom = elemTop + element.height();

        if (elemTop < divHeight) {
          //$(container).scrollTop(elemTop);
        } else if (elemBottom > divHeight) {
           $('#abc').scrollTop(element.height()+1);
        }
  }

}

我有大约5000行，所以我正在寻找优化的解决方案。