Справочник функций

Ваш аккаунт

Войти через: 
Забыли пароль?
Регистрация
Информацию о новых материалах можно получать и без регистрации:

Последние темы форума

Показать новые сообщения »

Почтовая рассылка

Подписчиков: 6311
Последний выпуск: 19.06.2015

Как скроллить содержимое div'a кнопками клавиатуры

47K
21 марта 2012 года
nechin
10 / / 10.06.2009
Привет.

Есть список. div со скроллом.
Код:
<input type="text" id="text_id" size="32" maxlength="32" value="" &#111;&#110;keyup="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>

При нажатии кнопок "вверх" или "вниз" при нахождении курсора в текстовом поле мы "перемещаемся" по записям списка.
Код:
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');
  }
}

Когда мы проходим в низ списка, то мы уходим за видимую границу, т.к. div ограниченного размера и он не скроллится.

Отсюда у меня вопрос. Как мне скроллить содержимое по мере прохождения по списку? Может есть какой-то метод, опция, событие или что-то другое?

Уточняю. Пример объясняет только суть задачи, и может быть с ошибками и неточностями.

Заранее спасибо.
365
22 марта 2012 года
int
668 / / 30.03.2005
Попробовать поиграться со scrollIntoView?
47K
22 марта 2012 года
nechin
10 / / 10.06.2009
Огромное спасибо. То, что надо!

Знаете кого-то, кто может ответить? Поделитесь с ним ссылкой.

Ваш ответ

Реклама на сайте | Обмен ссылками | Ссылки | Экспорт (RSS) | Контакты
Добавить статью | Добавить исходник | Добавить хостинг-провайдера | Добавить сайт в каталог