3

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.

user
  • 86,916
  • 18
  • 197
  • 190
Chavdar
  • 33
  • 1
  • 3

3 Answers3

12

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.

Tatu Ulmanen
  • 123,288
  • 34
  • 187
  • 185
  • Hi Tatu, Thank you for your answer ! It worked ! At first sight I thought it will block the arrow keys at all(even for my menu), but I use the onkeyup event for the menu.So everything is ok now...I only have to adjust it for IE too :) Thanks to Pekka too ! All the best. ps: I can't believe how much time I spent to find the solution and finally it was so simple :) – Chavdar Jan 07 '10 at 13:25
  • @Chavdar, don't forget to mark the answer accepted so others don't have to bother anymore. And you know, you could combine the event in your menu with this to make things a bit simpler (do your stuff in menu, then return false if the key was an arrow etc, but this requires to be bound on the onkeydown event). – Tatu Ulmanen Jan 07 '10 at 13:38
  • Apparently this is *still* a bug in Firefox after more than a decade. Instead of `return false`, which may have been the best solution when this was answered in 2010, a 2017 workaround to this current bug would be to simply call `event.preventDefault()` in your callback function. – Chunky Chunk Aug 04 '17 at 03:48
3

below code has fixed the problem

$(window).scroll(function () { 
  window.scrollTo(0,0);
});
Vidyadhar
  • 1,088
  • 9
  • 15
  • This answer actually addresses the problem efficiently in all browsers without explicitly disabling any events. The accepted answer (keydown) worked like a sledge hammer for me and completely disabled arrows in all input controls. – Karol Kolenda Aug 13 '14 at 13:52
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.

Community
  • 1
  • 1
Pekka
  • 442,112
  • 142
  • 972
  • 1,088