I have a screen that has scroll, and in this screen access a modal search. This modal loads some information into a table, so I use shortcut keys to make it easier to navigate.
The problem is that when scrolling using the scrollbars that exist in the background is used, how can I force it to only use the scroll of the table?
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><linkhref="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><linkhref="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">×</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>