按键事件后如何在Fancybox中滚动

Question

I am using Fancybox 2.1.5 in a ASP.NET MVC4 web application to display a list of string data in an <ul> . In an attempt to make things easier for the user I have enabled keypress events to navigate up and down the resulting <li> . The user can use the mouse to scroll & select or the keyboard to select items and continue on.

What I have found is that if the data to be shown is greater than a certain amount and vertical scrollbars are created (note: Fancybox has a maxHeight property set), when using the keyboard to navigate down the list, if the selected item goes off the fancybox window/dialog the scrollbars are not moving to track with it as they would if you were to scroll with the mouse-wheel.

Does anyone know how I can get Fancybox to scroll manually when I use the keyboard?

I have tried messing about with overflow css settings and fancybox scroll properties but this isnt helping. Im sure I need to trigger an event when I'm navigating manually..

Html

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

Fancybox JS inc. Keyboard Setup

$.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

It seems like the fancybox scrollable container (the one with overflow property set to auto ) needs to gain focus before you can use the arrows to scroll it up and down.

As a workaround, use the afterShow callback to set focus on the .fancybox-inner element like :

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

IMPORTANT : Notice that we also added the tabindex attribute to make the workaround consistent with most browsers. Chrome won't work without it and Firefox will loose focus if clicking inside the content (when having interactive content for instance.)

Check this JSFIDDLE and you will see that you can use the arrows to scroll the content up and down right after fancybox is shown.

Answer 2

Since you are not focusing on any input element, the main div will not (obviously) scroll. If you really need to, then you have to check position of highlighted element, calculate if it is visible and scroll parenting element if needed.