按下向下箭頭按下列表項

Question

我創建一個自定義的自動提示框，我需要繼續前進li項上箭頭向下按。

所以我將tabindex屬性添加到li它正在獲得焦點。 但問題是它以一些隨機高度向上滾動div，它從div中選擇了li。

向下箭頭鍵后：

按下一些向下箭頭鍵后：

之后它會離開屏幕，而鼠標按下則表現完美。

在這里我做了一個Demo JSFiddle首先點擊item1然后按向下箭頭它表現相同。

Answer 1

闡述我的評論

將容器的scrollTop設置index of focused li * li height index of focused li 。

在keydown時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

你嘗試過使用錨而不是tabindex嗎？ 例如

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

根據我的經驗，一些瀏覽器無法正確處理對tabindex的關注

Answer 3

我有一個這樣的問題，並通過將包含div的CSS樣式overflow設置為none或hidden來解決它，具體取決於您的偏好。

Answer 4

添加.scrollTop()以確保它居中或按您希望的方式放置。