Запретить прокрутку окна jquery

Я разрабатываю замену меню выбора в jquery.
Сначала я должен сделать новое меню выбора доступным для фокусировки, просто добавив tabindex="0" в контейнер.
Затем я отключаю фокус на исходном меню выбора и переключаю его на новый. Когда новый фокус находится в фокусе, и вы нажимаете стрелки вверх и вниз, параметры меняются соответственно, но возникает большая проблема. Когда вы нажимаете стрелки, тело тоже движется.
Я пробовал все эти решения до сих пор, но безуспешно:

$(window).unbind('scroll');
$(document).unbind('scroll');
$('body').unbind('scroll');
$(window).unbind('keydown');
$(document).unbind('keydown');

Проверьте код здесь http://pastebin.com/pVNMqyui Этот код взят из разрабатываемой версии Ideal Forms < href = "http://code.google.com/p/idealforms" rel = "nofollow noreferrer"> http://code.google.com/p/idealforms, который я собираюсь выпустить в ближайшее время , с поддержкой клавиатуры.

Есть идеи, почему это не работает?

РЕДАКТИРОВАТЬ: Решено!

Нашел ответ в этом сообщении тег ссылки jquery включить отключить

var disableScroll = function(e){
    if (e.keyCode === 40 || e.keyCode === 38) {
        e.preventDefault();
        return false;
    }
};
// And then...
events.focus: function(){ $(window).on('keydown', disableScroll); }
events.blur: function(){ $(window).off('keydown', disableScroll); }

Оно работает!


javascript scroll jquery
person elclanrs    schedule 13.12.2011    source источник
comment
возможно, это задание event.preventDefault(); в обработчике любого события, которое может вызвать прокрутку окна ...   -  person Aaron    schedule 13.12.2011
comment
Вы должны добавить это как ответ на свой вопрос.   -  person Merlyn Morgan-Graham    schedule 13.12.2011

Ответы (5)


arrow_upward
2
arrow_downward

В обработчике keydown для клавиш вверх и вниз верните false следующим образом:

'keydown' : function (e) {
    if (e.keyCode === 40) { // Down arrow
        that.events.moveOne('down');
    }
    if (e.keyCode === 38) { // Up arrow
        that.events.moveOne('up');
    }
    return false;
}

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

person techfoobar    schedule 13.12.2011

arrow_upward
0
arrow_downward

Нашел ответ в этом сообщении тег ссылки jquery включить отключить

var disableScroll = function(e){
    if (e.keyCode === 40 || e.keyCode === 38) {
        e.preventDefault();
        return false;
    }
};
// And then...
events.focus: function(){ $(window).on('keydown', disableScroll); }
events.blur: function(){ $(window).off('keydown', disableScroll); }
person elclanrs    schedule 13.02.2012

arrow_upward
0
arrow_downward

Вам нужно отменить событие нажатия клавиши для клавиш со стрелками. Используйте e.preventDefault() или return false в вашем .keydown() обработчике, если была нажата клавиша со стрелкой.

person gilly3    schedule 13.12.2011

arrow_upward
-1
arrow_downward

Это очень просто. Для этого вам даже не понадобится jQuery.

jQuery:

$("body").css("overflow", "hidden");

javascript

<body style="overflow: hidden">

Добавление в стиле:

<style>
 body {width:100%; height:100%; overflow:hidden, margin:0}
 html {width:100%; height:100%; overflow:hidden}
</style>

если вы хотите привязать клавиши со стрелками, попробуйте что-нибудь вроде:

$('body').keydown(function(e){
    e.preventDefult();
    if(e.keyCode == 37) // for left key
    {
        // implement focus functionality
    }
    if(e.keyCode == 38) // for up key
    {
        // implement focus functionality
    }
    if(e.keyCode == 39) // for right key
    {
        // implement focus functionality
    }
    if(e.keyCode == 40) // for doqn key
    {
        // implement focus functionality
    }
});
person dku.rajkumar    schedule 13.12.2011
comment
Проблема с этим подходом заключается в том, что полоса прокрутки исчезает, что приводит к смещению содержимого, и тогда вам придется как-то рассчитать смещение. Я пробовал это, слишком сложно и излишне ... - person elclanrs; 13.12.2011

arrow_upward
-1
arrow_downward

Наилучший способ добиться того же - установить скрытое переполнение тела.

$("body").css("overflow", "hidden");

После процесса просто сделайте наоборот

`$("body").css("overflow", "hidden");
person Tarun Gupta    schedule 17.08.2013