Question

我有一个部分可用的键盘导航脚本。

当我在主页（页面顶部）时，按下＆＃34;向下＆＃34;键盘上的键页面滚动到下一部分。问题是，如果我用鼠标在页面中间或页面底部滚动，我想用键盘进入下一部分（在顶部或底部），它不起作用。事实上，我有一个计数器系统，可让您在$（＆＃39; .layout＆＃39;）部分之间导航，但此系统显示其限制。

所以我很困惑，我需要一些帮助。我可以在代码中添加什么，以便我的键盘导航在页面的任何位置正常工作？

http://jsfiddle.net/Xroad/LPvS9/7/

// KEYBOARD NAV
$(function () {
    var positions = []
    $('.layout').each(function () {
        positions.push(parseInt($(this).offset().top));
    })

    var count = 0
    var x = positions.length - 1
    $(window).keydown(function (event) {
        switch (event.keyCode) {
            case 38:
                if (count >= x * (-1) && count !== 0) {
                    count--
                    $('#page').stop().animate({
                        scrollTop: positions[count]
                    }, 700);
                } else {
                    event.preventDefault()
                }

                break;

            case 40:
                if (count <= x) {
                    count++
                    $('#page').stop().animate({
                        scrollTop: positions[count]
                    }, 700);
                } else {
                    event.preventDefault()
                }

                break;
        }
    });
});

Answer 1

我强烈建议不要操纵浏览器的默认导航实现。

如果那是不可能的，我认为在你的情况下最好的解决方案是使所有键盘导航事件基于当前滚动位置。

一个例子是将您想要前往的所有位置或div存储在某种容器（如数组）中。然后在按键事件中，您将使用以下代码测试当前滚动位置的位置，然后做出相应的反应。

$('#page').scrollTop())

Answer 2

您可以监控滚动事件，并根据更新计数变量。

http://jsfiddle.net/LPvS9/21/

$("#page").scroll( function (event) {
    scrollTopPosition = $("#page").scrollTop()+$("#page").height();
    for (i=positions.length-1; i>0; i--)
    {
        if (scrollTopPosition>=positions[i]) { count = i; break; }

    }
});

请注意我将页面高度添加到顶部位置，这是必要的，因为最后一部分比页面高度短。您可以尝试删除

+$("#page").height()

但为了它的工作，你需要确保第3部分有足够的空间，以允许其标题像其他部分一样滚动到顶部。

jQuery键盘导航：鼠标功能障碍

2 个答案: