Управление положением страницы с помощью клавиш со стрелками

Question

Управление положением страницы с помощью клавиш со стрелками

0

Как вы можете видеть с этой скрипкой, я пытаюсь разрешить пользователю использовать клавиши со стрелками влево и вправо, чтобы перейти на разные разделы (каждый из них - размер окна) на странице.

Вот пример используемого Javascript:

var windowHeight = $(window).height(), windowWidth = $(window).width();

$(".slide").css("height", windowHeight);
$(".slide").css("width", windowWidth);

$(window).resize(function () {
    "use strict";
    var windowHeight = $(window).height(), windowWidth = $(window).width(), centerHeight = windowHeight / 2, centerWidth = windowWidth / 2;

    $(".slide").css("height", windowHeight);
    $(".slide").css("width", windowWidth);

});

function leftArrowPressed() {
    "use strict";
    var windowHeight = Math.abs($(window).height()) * -1;
    $("html, body").animate({ scrollTop: "+=" + windowHeight});
}

function rightArrowPressed() {
    "use strict";
    var windowHeight = $(window).height();
    $("html, body").animate({ scrollTop: "+=" + windowHeight });
}

document.onkeydown = function (evt) {
    "use strict";
    evt = evt || window.event;
    switch (evt.keyCode) {
    case 37:
        leftArrowPressed();
        break;
    case 39:
        rightArrowPressed();
        break;
    }
};

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

Что наименее сложно исправить? Я бы согласился с использованием атрибутов href и id, а также jQuery или даже простого округления, чтобы убедиться, что он возвращается к умолчанию. Заранее спасибо!

JaredCubilla 27 апр. 2014, в 21:55

Источник

Теги:

javascript

jquery

html

css

1 ответ

Ещё вопросы

Sunjay Varma · Accepted Answer · 2014-04-27T16-44-00.000Z

Вместо того, чтобы использовать высоту окна, попробуйте вместо этого использовать смещение этого раздела. Если у вас есть определенный элемент, это смещение представляет собой объем пространства сверху. Используйте это вместо + =.

Здесь обновленная скрипка: http://jsfiddle.net/VuVW6/1/

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

Здесь обновленная часть вашего JS. Все остальное может оставаться неизменным:

var current = 0;
var sections = $(".slide")
function leftArrowPressed() {
    "use strict";
    current -= 1;
    current = Math.min(sections.length-1, Math.max(current, 0));
    $("html, body").animate({ scrollTop: sections.eq(current).offset().top});
}

function rightArrowPressed() {
    "use strict";
    current += 1;
    current = Math.min(sections.length-1, Math.max(current, 0));
    $("html, body").animate({ scrollTop: sections.eq(current).offset().top});
}

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

Кроме того, просто подсказка: call finish() перед вашим следующим вызовом анимации, чтобы очередь анимации была очищена. Не нужно никаких бесконечных циклов. :)

Не могли бы вы подробнее рассказать об этом? Я не совсем понимаю, что ты намекаешь на меня.