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.

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. — Andy E, Jun 29 '09 at 15:05
It is. My web application is an editor; not a formal webpage. — Daddy Warbox, Jun 29 '09 at 22:33
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. — Adrian Schmidt, Oct 17 '12 at 10:00

score 81 · Accepted Answer · edited Jul 19 '11 at 15:18

81

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;
});

edited Jul 19 '11 at 15:18

phihag

245,801
63
407
443

answered Jun 29 '09 at 05:00

TheVillageIdiot

38,082
20
126
184

7

It handles PgUp(33), PgDn(34), End(35), Home(36), Left(37), Up(38), Right(39), Down(40) – TheVillageIdiot Jun 29 '09 at 05:10
1

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. – Yo-L Mar 03 '11 at 15:49
18

the trick is to use **onkeydown**, instead of onkeyup and also **e.preventDefault** – Jun 14 '12 at 04:10
3

You can use `[ ... ].indexOf(key) != -1` and `addEventListener` to eliminate the need for jquery there – srcspider Sep 11 '14 at 10:31
To add to what @srcspider said: Or, perhaps more idiomatically, `ar = new Set([...])` and `ar.has(key)`. – Tim Čas Sep 13 '17 at 16:15

score 2 · Answer 2 · answered Sep 11 '14 at 11:15

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.

score 1 · Answer 3 · answered Aug 01 '14 at 08:54

1

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.

answered Aug 01 '14 at 08:54

JVitela

2,432
2
20
18

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

3 Answers3

Linked