How to use scroll only in the table that is inside a modal?

Question

I have a screen that has scroll, and on this screen access a search modal. This modal loads some information in table, so I use the shortcut keys to facilitate the navigation of it.

The problem is that when navigating using the keys the scroll that exists in the background is used, as I can force it to use only the table scroll?

Example:

 $("#myModal").on('shown.bs.modal', function() {
   $(".table tr:eq(1)").addClass('btn-success').focus();

   $("#myModal").off().on('keydown', function(e) {
     e.stopImmediatePropagation();
     var active = $(".table tbody tr.btn-success");
     var index = $(".table tr.btn-success").index();
     console.log(active);
     switch (e.keyCode) {
       case 37: // when press arrow left do prev
         $("#btnPrevPesquisa").click();
         break;
       case 38: // when press arrow up do up
         if (index != 0) {
           active.prev().click();
         }
         break;
       case 39: // when press arrow right do next
         $("#btnNextPesquisa").click();
         break;
       case 40: // when press arrow down do down
         if (index != 9) {
           active.next().click();
         }
         break;
       default:
     }
   });
   $(".table tbody").on('click', "tr", function() {
     var el = $(this);
     $(".table tr").removeClass('btn-success');
     el.addClass('btn-success');
   });
   $("#btnSairPesquisa").on('click', function() {
     $("#myModal").modal("hide");
   });
 });

body {
  height: 5000px;
  overflow: auto;
}
.table-overflow {
  height: 200px;
  overflow: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Abrir Modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title" id="myModalLabel">Pesquisa</h4>
      </div>
      <div class="modal-body">
        <div class="table-overflow">
          <table class="table">
            <thead>
              <tr>
                <th>#</th>
                <th>Nome</th>
                <th>Sobrenome</th>
                <th>Usuario</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th>1</th>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
              </tr>
              <tr>
                <th>2</th>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
              </tr>
              <tr>
                <th>3</th>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@twitter</td>
              </tr>
              <tr>
                <th>3</th>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@twitter</td>
              </tr>
              <tr>
                <th>3</th>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@twitter</td>
              </tr>
              <tr>
                <th>3</th>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@twitter</td>
              </tr>
              <tr>
                <th>3</th>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@twitter</td>
              </tr>
              <tr>
                <th>3</th>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@twitter</td>
              </tr>
              <tr>
                <th>3</th>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@twitter</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="modal-footer">


        <button type="button" class="btn btn-default" data-dismiss="modal" id="btnSairPesquisa">Sair</button>

      </div>
    </div>
  </div>
</div>

See also on jsfiddle