Disable arrow keys scroll in browser without e.preventDefault()

Question

I am trying to remove the feature of scrolling in a page with arrows. In all other posts that I have checked they suggested e.preventDefault() function. I tried it but it was also blocking many default features for arrows that are heavily used in my page. I want just to block the scrolling with arrows and not the default behavior of arrows. What solution do you suggest in this case?

Please don't mark as a duplicate since in all the other posts e.preventDefault() was taken as solution.

Possible duplicate of [prevent scrolling with arrow keys](http://stackoverflow.com/questions/3208021/prevent-scrolling-with-arrow-keys) — Keerthana Prabhakaran, Feb 28 '17 at 08:52
Take a look at this answer: [http://stackoverflow.com/questions/17758578/how-to-remove-the-arrows-in-a-scroll-bar-through-css] Else you can install a plugin named **nicescroll** as mentioned in the above link. — Angela Amarapala, Feb 28 '17 at 09:58

score 2 · Answer 1 · answered Feb 28 '17 at 08:53

2

I would suggest playing with document.activeElement and e.preventDefault() when the active element is an input, textarea and so on.

answered Feb 28 '17 at 08:53

Vitalii Petrychuk

14,035
8
51
55

Thanks for your help. I just added some conditions on it and it worked :) – Anonymous Feb 28 '17 at 10:36
You are welcome. And you may accept the answer if it was helpful ;) – Vitalii Petrychuk Feb 28 '17 at 10:38

score 0 · Answer 2 · answered Feb 28 '17 at 09:01

0

document.addEventListener('keyup', function(e) {
    if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
        e.preventDefault();
        return false;
    }
});

answered Feb 28 '17 at 09:01

José Manuel Lucas

199
1
9

Disable arrow keys scroll in browser without e.preventDefault()

2 Answers2