Навигация по клавиатуре jQuery: нарушение работы с мышью

0

У меня есть скрипт для навигации на клавиатуре, который частично работает.

Когда я нахожусь на главной странице (вверху страницы), и я нажимаю клавишу "вниз" на моей клавиатуре, страница прокручивается до следующего раздела. Проблема в том, что если я прокручиваю свою мышь в середине страницы или внизу страницы, и я хочу использовать клавиатуру, чтобы перейти к следующему разделу (сверху или снизу), это не сработает. На самом деле у меня есть счетная система, которая позволяет вам перемещаться между разделами $ ('.layout'), но эта система показывает свои пределы.

Поэтому я смущен, и мне нужна помощь. Что я могу добавить в свой код для того, что моя клавиатурная навигация отлично работает в любой точке страницы?

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;
        }
    });
});
Теги:
keyboard

2 ответа

1

вы можете отслеживать событие прокрутки и на основе этого обновления переменной счетчика.

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()

но для этого вам нужно будет убедиться, что в третьем разделе достаточно места, чтобы его заголовок мог прокручиваться вверх, как в другом разделе.

1

Я настоятельно рекомендую не манипулировать реализацией навигационных браузеров по умолчанию.

Если это не возможно, я думаю, что лучшим решением в вашем случае было бы сделать все события навигации клавиатуры основаны на текущей позиции прокрутки.

Одним из примеров является сохранение всех позиций или разделов, которые вы хотите переместить, в какой-то контейнер, например массив. Затем в событии нажатия клавиши вы должны проверить, где находится текущая позиция прокрутки, с приведенным ниже кодом, а затем реагировать соответствующим образом.

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

Ещё вопросы

Сообщество Overcoder
Наверх
Меню