Как скроллить содержимое div'a кнопками клавиатуры
Привет.
Есть список. div со скроллом.
При нажатии кнопок "вверх" или "вниз" при нахождении курсора в текстовом поле мы "перемещаемся" по записям списка.
Когда мы проходим в низ списка, то мы уходим за видимую границу, т.к. div ограниченного размера и он не скроллится.
Отсюда у меня вопрос. Как мне скроллить содержимое по мере прохождения по списку? Может есть какой-то метод, опция, событие или что-то другое?
Уточняю. Пример объясняет только суть задачи, и может быть с ошибками и неточностями.
Заранее спасибо.
Есть список. div со скроллом.
Код:
<input type="text" id="text_id" size="32" maxlength="32" value="" onkeyup="keyUp(event);"/>
<div style="display: none;position: absolute; border: 1px solid grey; width: 282px; max-height: 300px; background: none repeat scroll 0% 0% white; z-index: 1; overflow: auto;">
<table id="my_table">
<tr><td align='left'>Record #1</td></tr>
<tr><td align='left'>Record #2</td></tr>
<tr><td align='left'>Record #3</td></tr>
<tr><td align='left'>Record #4</td></tr>
...
<tr><td align='left'>Record #20</td></tr>
</table>
</div>
<div style="display: none;position: absolute; border: 1px solid grey; width: 282px; max-height: 300px; background: none repeat scroll 0% 0% white; z-index: 1; overflow: auto;">
<table id="my_table">
<tr><td align='left'>Record #1</td></tr>
<tr><td align='left'>Record #2</td></tr>
<tr><td align='left'>Record #3</td></tr>
<tr><td align='left'>Record #4</td></tr>
...
<tr><td align='left'>Record #20</td></tr>
</table>
</div>
При нажатии кнопок "вверх" или "вниз" при нахождении курсора в текстовом поле мы "перемещаемся" по записям списка.
Код:
var row = -1;
function keyUp(event) {
// up
if (event.keyCode == 38) {
row--;
$('#my_table').find('tr').eq(row).css('background-color','grey');
}
// down
if (event.keyCode == 40) {
row++;
$('#my_table').find('tr').eq(row).css('background-color','grey');
}
}
function keyUp(event) {
// up
if (event.keyCode == 38) {
row--;
$('#my_table').find('tr').eq(row).css('background-color','grey');
}
// down
if (event.keyCode == 40) {
row++;
$('#my_table').find('tr').eq(row).css('background-color','grey');
}
}
Когда мы проходим в низ списка, то мы уходим за видимую границу, т.к. div ограниченного размера и он не скроллится.
Отсюда у меня вопрос. Как мне скроллить содержимое по мере прохождения по списку? Может есть какой-то метод, опция, событие или что-то другое?
Уточняю. Пример объясняет только суть задачи, и может быть с ошибками и неточностями.
Заранее спасибо.
Попробовать поиграться со scrollIntoView?
Огромное спасибо. То, что надо!