Question

我正在使用this scrollTo script from webdesignerwall，并试图添加键盘控件。

原始剧本：

$(function () {
    function scroll(direction) {
        var scroll, i, positions = [],
            here = $(window).scrollTop(),
            collection = $('.post');

        collection.each(function () {
            positions.push(parseInt($(this).offset()['top'], 10));
        });
        for (i = 0; i < positions.length; i++) {
            if (direction == 'next' && positions[i] > here) {
                scroll = collection.get(i);
                break;
            }
            if (direction == 'prev' && i > 0 && positions[i] >= here) {
                scroll = collection.get(i - 1);
                break;
            }
        }
        if (scroll) {
            $.scrollTo(scroll, {
                duration: 750
            });
        }
        return false;
    }
    $("#next,#prev").click(function () {
        return scroll($(this).attr('id'));
    });
});

对于键盘控制，我尝试添加这样的东西：

$(window).keypress(function(event) {
    switch (event.keyCode) {
        case 38: // key is up
            return scroll($(this).attr('id'));
        case 40: // key is down
            return scroll($(this).attr('id'));
    }
});

感谢您的帮助。

Answer 1

应该是：

$(window).keydown (function(event) {
    if (event.altKey) {
        switch (event.which) {
            case 78:  // Alt-N = next
            case 110: // Alt-n = next
                scroll ('next');
                break;
            case 80:  // Alt-P = prev
            case 112: // Alt-p = prev
                scroll ('prev');
                break;
        }
    }
})

See it in action at jsFiddle.（点击结果窗格中的任意位置以激活键盘控制。）

注意：对于像这样的事情，不要覆盖常见的UI键，如箭头！它会对键盘用户（或所有用户，如果使用过文本框）造成严重破坏。此外，在这种情况下，无论如何都会导致“跳跃”行为。

我已将功能重新映射到 Alt N 和 Alt P 。
（在演示jsFiddle中，我已经离开了箭头键，因此您可以看到该映射的一些问题。）

Answer 2

在Brock Adams的帮助下，这是完成的脚本：

function scroll(direction) {

    var scroll, i,
            positions = [],
            here = $(window).scrollTop(),
            collection = $('.post');

    collection.each(function() {
        positions.push(parseInt($(this).offset()['top'],10));
    });

    for(i = 0; i < positions.length; i++) {
        if (direction == 'next' && positions[i] > here) { 
scroll = collection.get(i); 
break; 
 }
        if (direction == 'prev' && i > 0 && positions[i] >= here) { 
scroll = collection.get(i-1); 
break; 
 }
    }

    if (scroll) {
        $.scrollTo(scroll, {
            duration: 700       
        });
    }

    return false;
}


$(function() {
    $("#next,#prev").click(function() {        
        return scroll($(this).attr('id'));    
    });
});


$(window).keydown (function(event) {
    if (event.altKey) {
        switch (event.which) {
            case 78:  // Alt-N = next
            case 110: // Alt-n = next
                scroll ('next');
                break;
            case 80:  // Alt-P = prev
            case 112: // Alt-p = prev
                scroll ('prev');
                break;
        }
    }
    else {
        switch (event.keyCode) {
            case 37: // key is left
        case 38: // key is up
                scroll ('prev');
                break;
            case 39: // key is right
        case 40: // key is down
                scroll ('next');
                break;
        }
    }
});

将键盘控制添加到ScrollTo Post

2 个答案: