按键事件后如何在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不会（显然）滚动。 如果确实需要，则必须检查突出显示的元素的位置，计算它是否可见，并在需要时滚动育儿元素。