按鍵事件后如何在Fancybox中滾動

Question

我在ASP.NET MVC4 Web應用程序中使用Fancybox 2.1.5在<ul>顯示字符串數據列表。 為了使用戶更輕松，我啟用了按鍵事件來在結果<li>上下移動。 用戶可以使用鼠標滾動和選擇，或使用鍵盤選擇項目並繼續。

我發現的是，如果要顯示的數據大於一定數量並且創建了垂直滾動條（請注意：Fancybox設置了maxHeight屬性），則在使用鍵盤向下導航列表時，如果所選項目不可用在fancybox窗口/對話框中，滾動條並沒有像跟蹤鼠標滾輪那樣移動以進行跟蹤。

有誰知道我使用鍵盤時如何使Fancybox手動滾動？

我試圖弄亂溢出的CSS設置和fancybox滾動屬性，但這沒有幫助。 我確定我在手動導航時需要觸發一個事件。

HTML

<div id='myDiv'>
    <ul>
        <li>Apple</li>
        <li>Orange</li>
        <li>Pear</li>
    </ul>
</div>

Fancybox JS inc。 鍵盤設定

$.fancybox.open($("#myDiv"), {
    minHeight: 0,
    maxHeight: 300,
    afterShow: function () {
        $(document).on("keydown", function (e) {
            setupKeyboardEvents(e);
        })
    },
    afterClose: function () {
        $(document).off("keydown");
    }
});

function setupKeyboardEvents(e) {
    var $selected = $("#myDiv ul li.highlight"),
        $li = $("#myDiv ul li");

    if (e.keyCode == 40) { /* Down */
        if (!$selected.length) {
            $li.eq(0).addClass('highlight')
        }
        else {
            $selected.removeClass('highlight');
            if (!$selected.next().length) {
                $li.eq(0).addClass('highlight')
            } else {
                $selected.next().addClass('highlight');
            }
        }
    } else if (e.keyCode === 38) { /* Up */
        if (!$selected.length) {
            $li.eq(-1).addClass('highlight')
        }
        else {
            $selected.removeClass('highlight');
            if (!$selected.prev().length) {
                $li.eq(-1).addClass('highlight')
            } else {
                $selected.prev().addClass('highlight');
            }
        }
    } else if (e.keyCode == 13) { /* Enter */
        if ($selected.length) {
            // CONTINUE..
        }
        return false;
    }
}

Answer 1

似乎fancybox可滾動容器（將overflow屬性設置為auto容器）需要獲得focus然后才能使用箭頭上下滾動它。

解決方法是，使用afterShow回調將focus設置在.fancybox-inner元素上，例如：

$(".fancybox").fancybox({
    afterShow: function(){
        $(".fancybox-inner").attr("tabindex",1).focus();
    }
});

重要說明 ：請注意，我們還添加了tabindex屬性，以使解決方法與大多數瀏覽器一致。 如果沒有它，Chrome將無法運行，如果在內容中單擊（例如，具有交互式內容時），Firefox將失去focus 。

選中此JSFIDDLE ，您將看到可以在顯示fancybox之后使用箭頭上下滾動內容。

Answer 2

由於您不關注任何輸入元素，因此主div不會（顯然）滾動。 如果確實需要，則必須檢查突出顯示的元素的位置，計算它是否可見，並在需要時滾動育兒元素。