Html - disable page scrolling with arrow keys with out toatlly disabling arrow keys

Question

I have a web page that use the arrow keys to move to the next page on my website but my only deli-ma is i want to disable page scrolling with the arrow keys with out totally disabling use of the arrow keys is this possible? I have done research on this but on all the other questions they totally disable arrow keys but thats one of the ways you navigate my site

PS don't mark this a duplicate as all the other ask how to disable scrolling with the arrow keys but they totally disable them i just want to disable scrolling with them not totally disable them.

Answer 1

You should be able to catch the keydown event and prevent the default action (eg scrolling), then do whatever else you want with the event. For example:

document.addEventListener("keydown", function (e) {
  if([37,38,39,40].indexOf(e.keyCode) > -1){
    e.preventDefault();
    // Do whatever else you want with the keydown event (i.e. your navigation).
  }
}, false);