I'm building a menu with topics and items. Each topic can be expanded and collapsed by clicking on it. My task is to make it possible to move through menu topics and items with the up and down arrow keys. I've done this already, but the problem is that when the page is bigger than the window, the page is scrolling when pressing the arrow keys. I've tried using:

document.body.style.overflow = "hidden";

to stop the page from scrolling. Thus when I click on 'Topic2' for example I can continue using the arrow keys to go to next topic/item. After that if I click anywhere else on the screen I set the overflow back to auto and the page can be scrolled again.

This works in IE, but not in FF. In FF the scrollbars are being removed and the mousewheel doesn't scroll the page, but the arrow keys still DO. So my question is how to fix that, or better, how not to scroll the page when the focus is on any menu element? Thus I won't use the overflow property.

I'm building a menu with topics and items. Each topic can be expanded and collapsed by clicking on it. My task is to make it possible to move through menu topics and items with the up and down arrow keys. I've done this already, but the problem is that when the page is bigger than the window, the page is scrolling when pressing the arrow keys. I've tried using:

document.body.style.overflow = "hidden";

to stop the page from scrolling. Thus when I click on 'Topic2' for example I can continue using the arrow keys to go to next topic/item. After that if I click anywhere else on the screen I set the overflow back to auto and the page can be scrolled again.

This works in IE, but not in FF. In FF the scrollbars are being removed and the mousewheel doesn't scroll the page, but the arrow keys still DO. So my question is how to fix that, or better, how not to scroll the page when the focus is on any menu element? Thus I won't use the overflow property.

• javascript
• scroll
• arrow-keys

3 Answers 3

You have to bind a keydown event to the document, and if the event keycode matches any of the arrow keys (37 through 40), return false. That way the arrow press won't go any further.

document.onkeydown = function(e) {
    var k = e.keyCode;
    if(k >= 37 && k <= 40) {
        return false;
    }
}

You can easily expand on that to work only when your menu is active, but without seeing some of it's code, it's impossible to give you an example.

below code has fixed the problem

$(window).scroll(function () { 
  window.scrollTo(0,0);
});

The only way I can see is intercepting the keydown event and doing the blurring/focusing yourself.

There seem to be some gotchas with catching those keys, see this question for a number of (JQuery based) examples that look quite promising.