Question

我在ASP.NET MVC4 Web应用程序中使用 Fancybox 2.1.5 来显示<ul>中的字符串数据列表。为了让用户更轻松，我已经启用了按键事件，以便在生成的<li>中上下导航。用户可以使用鼠标滚动和播放。选择或键盘选择项目并继续。

我发现如果要显示的数据大于一定数量且创建了垂直滚动条（注意：Fancybox设置了maxHeight属性），使用键盘向下导航列表时，如果选中item关闭了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才能使用箭头向上和向下滚动。< / p>

要解决此问题，请使用afterShow回调在focus元素上设置.fancybox-inner，如：

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

重要：请注意，我们还添加了tabindex属性，以使解决方法与大多数浏览器保持一致。如果没有它，Chrome将无法运行，如果在内容中点击（例如，在拥有交互式内容时），Firefox将会丢失focus。

选中 JSFIDDLE ，您会看到在显示fancybox后，您可以使用箭头向上和向下滚动内容。

Answer 2

由于您没有关注任何输入元素，因此主div不会（显然）滚动。如果你真的需要，那么你必须检查突出显示元素的位置，计算它是否可见并在需要时滚动父元素。

Keydown事件后如何在Fancybox内滚动

2 个答案: