How do I prevent scrolling with arrow keys but NOT the mouse?

Question

Since I'm using jQuery, any solution via that would work too. Ideally, I'd like to know both, though.

I already have the arrow keys bound to another function on my page (using jQuery), but having them cause the page to scroll in addition to that, causes me problems.

I may have known this at one time, but I don't remember it anymore.

Precipitation

It's extremely bad UI design to prevent keyboard keys from scrolling the active frame. I (and many other people) browse mostly with keys and it's very frustrating to have to use the mouse on the odd page here and there that blocks proper keyboard navigation. Of course, there are probably valid reasons to do it but you should make sure yours is one of them. – Lay

It is. My web application is an editor; not a formal webpage. – Precipitation

I fully agree that it's bad UI-design to always prevent the standard behaviour of the browser. But it is completely fine to do it in certain situations, imho. In my case, I need it to prevent the page from scrolling when the user steps between alternatives in a list. When focus is outside the list, the page will scroll normally. Inside the list, the page will avoid scrolling, unless needed to display the selected item. – Raine

Answer 1

Adding document level keypress handler does the trick!

var ar=new Array(33,34,35,36,37,38,39,40);

$(document).keydown(function(e) {
     var key = e.which;
      //console.log(key);
      //if(key==35 || key == 36 || key == 37 || key == 39)
      if($.inArray(key,ar) > -1) {
          e.preventDefault();
          return false;
      }
      return true;
});

Evildoer

It handles PgUp(33), PgDn(34), End(35), Home(36), Left(37), Up(38), Right(39), Down(40) – Evildoer

You should use a non anonymous function and bind the function to the keyPress event also. This way the scrolling is stopped when the button is continuisly pressed. – Hachure

the trick is to use onkeydown, instead of onkeyup and also e.preventDefault – Ytterbium

You can use [ ... ].indexOf(key) != -1 and addEventListener to eliminate the need for jquery there – Stringent

To add to what @Stringent said: Or, perhaps more idiomatically, ar = new Set([...]) and ar.has(key). – Arid

Answer 2

Under some circumstances, eg. when you don't actualy have an element you focus on, just some area you had to click, you might not have too much control over the handler and preventing the event at the global level can be a little flaky at best (as I found out the hard way).

The simplest solution in those cases is to bind on the click even of the control button and focus on a empty input element which you position -9000px to the left.

You can then reliably block the event via keydown and also dont have to worry about blocking default behavior or other global listeners since the default behavior on the input element will just move the cursor to the left and right.

Stringent

Answer 3

If you add a document level keypress handler it will prevent normal scroll on the page at any time, not only when your element has the focus, this might be an undesired effect.

Amberlyamberoid