Сосредоточьтесь на элементе списка на стрелке вниз

Я создаю настраиваемое окно подсказки автоматически. Мне нужно перемещаться по элементам li со стрелкой вниз.

поэтому я добавил атрибут tabindex в ли он, он становится фокусом. но проблема в том, что он прокручивает div вверх с некоторой случайной высотой, из которой выбранный li из div.

после стрелки вниз:

и после нажатия клавиши со стрелкой вниз:

и после этого он выходит из экрана, пока мышь вниз ведет себя отлично.

Здесь я сделал Demo JSFiddle сначала нажмите item1, а затем нажмите стрелку вниз, чтобы она выглядела одинаково.

Ответ 1

Разработка моего комментария

Установите контейнер scrollTop на index of focused li * li height.

return false при нажатии клавиши для предотвращения нормальной прокрутки браузера с переполнением.

$('div.container').on('focus', 'li', function() {
    var $this = $(this);
    $this.addClass('active').siblings().removeClass();
    $this.closest('div.container').scrollTop($this.index() * $this.outerHeight());
}).on('keydown', 'li', function(e) {
    var $this = $(this);
    if (e.keyCode === 40) {        
        $this.next().focus();
        return false;
    } else if (e.keyCode === 38) {        
        $this.prev().focus();
        return false;
    }
}).find('li').first().focus();

jsfiddle http://jsfiddle.net/38zR3/42/

Ответ 2

Вы пытались использовать якорь вместо tabindex? например,

<li><a href="#"></li>

По моему опыту, некоторые браузеры не могут правильно отрегулировать фокус на tabindex

Ответ 3

У меня была такая проблема однажды и решила ее, установив стиль CSS overflow содержащего div на none или hidden в зависимости от ваших предпочтений.

Ответ 4

Добавьте .scrollTop(), чтобы убедиться, что он либо центрирован, либо как вы хотите.