0

我在 ASP.NET MVC4 Web 应用程序中使用Fancybox 2.1.5在<ul>. 为了让用户更轻松，我启用了按键事件来向上和向下导航结果<li>。用户可以使用鼠标滚动和选择或使用键盘选择项目并继续。

我发现如果要显示的数据大于一定数量并且创建了垂直滚动条（注意：Fancybox 设置了 maxHeight 属性），当使用键盘向下导航列表时，如果所选项目熄灭花式框窗口/对话框滚动条不会像您使用鼠标滚轮滚动时那样移动以跟踪它。

有谁知道当我使用键盘时如何让 Fancybox 手动滚动？

我尝试过处理溢出的 CSS 设置和花式滚动属性，但这无济于事。我确定我需要在手动导航时触发一个事件..

html

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

Fancybox JS 公司 键盘设置

$.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;
    }
}
4

2 回答 2

0

在您可以使用箭头上下滚动之前，fancybox 可滚动容器（overflow属性设置为的容器）似乎auto需要获得增益。focus

作为一种解决方法，使用afterShow回调设置元素，如focus：.fancybox-inner

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

重要提示：请注意，我们还添加了该tabindex属性以使解决方法与大多数浏览器一致。如果没有它，Chrome 将无法工作，focus如果在内容内部单击（例如，当有交互式内容时），Firefox 会松动。

检查这个JSFIDDLE，你会看到你可以在fancybox 显示后使用箭头上下滚动内容。

于 2013-08-19T00:59:09.770 回答
0

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

于 2013-08-19T09:18:07.553 回答