Как сделать перемещение по списку клавишами?

Question

[cjitkul33]

Как сделать перемещение по списку клавишами?

В целом, если пример простой, например менюшка - все просто.
Рабочий пример даже гуглится легко, например вот такая реализация: jsfiddle.net/d3y19r2s

Но нужно сделать с навигацией клавишами довольно большие списки, которые не помещаются в экран и там начинается проблема со штатной полосой прокрутки.
Вот как-то так: jsfiddle.net/g7wodea4

Т.е. при нажатии стрелки вниз перемещается и полоса прокрутки, и выделение. Но совершенно не пропорционально друг другу.

Может быть есть готовые решения, чтобы не пилить велосипед? Что-то не смог нагуглить.
Желательно на jquery.

Answer 1

[0xD34F]

В обработчике keydown отменяете действие по умолчанию, делаете прокрутку к выделенному элементу. Ну и в целом многовато копипасты, можно сократить:

$('<div class="list" />')
  .append([...Array(100)].map((n, i) => `<div>Item ${i}</div>`).join(''))
  .appendTo('body');

const li = $('.list').children();
let selected = $();

$(window).on('keydown', function(e) {
  e.preventDefault();

  const [ method, index ] = ({
    ArrowUp: [ 'prev', -1 ],
    ArrowDown: [ 'next', 0 ],
  })[e.key] || [];

  if (method) {
    const next = selected.removeClass('selected')[method]();
    selected = (next.length ? next : li.eq(index)).addClass('selected');
    $(this).scrollTop(selected.position().top);
  }
});

Comments

[cjitkul33]

Спасибо, похоже, что то, что нужно

Answer 2

[ProjectSoft]

Или так, но принцип один.