javascript - 下矢印キーを押してリスト項目にフォーカス

Question

li下矢印キーを押してアイテムに移動する必要があるカスタムの自動提案ボックスを作成しています。

だから私はliにtabindex属性を追加しました。それはフォーカスを得ています。しかし、問題は、divから選択されたliを取り出すランダムな高さでdivを上にスクロールすることです。

下矢印キーの後:

下矢印キーを押した後：

その後、マウスダウンが完全に動作している間、画面から消えます。

ここでは、デモ JSFiddleを 最初にクリックitem1してから、同じように動作する矢印を押します。

Answer 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/

Answer 2

a を追加し.scrollTop()て、中央に配置するか、希望どおりにするかを確認します。