Freeze scroll on arrow key up or down using JavaScript

Amit Merchant · July 27, 2020 ·

I was working on implementing the Konami code easter egg on this blog and there was this need where I need to stop the scrolling only when the previous two presses by the user are ArrowUp.

To give a primer, the Konami code consists of the following key sequence:

BA

Now, as you can see, the firt two keypresses are . I wanted to disable the scrolling on this point onwards. i.e sarting from . Because I wanted the user to be on the same place when he/she presses after pressing .

To check this, I added an event-listener on keydown like so.

document.addEventListener('keydown', function(e) {
    // To make sure it freezes the scroll when 
    // the first two keypresses are "ArrowUp"
    if (
        keySequence[0] === 'ArrowUp' 
        && keySequence[1] === 'ArrowUp' 
        && e.key === 'ArrowDown'
    ) {
        e.preventDefault();
    }
});

As you can see, I’m checking if the fist two indexes in keySequence(where I store user-entered keystrokes) array contains ArrowUp and the next key is ArrowDown, I would just prevent the scroll by disabling the default key action of ArrowDown using e.preventDefault();.

That’s it! It will disable the scroll further if this scenario happens and that is what I wanted. And the code also makes sure, it behaves like this only if a certain scenario arrives.

Hi there! I'm Amit. I write articles about all things web development. If you like what I write and want me to continue doing the same, I would like you buy me some coffees. I'd highly appreciate that. Cheers!

Newsletter

Follow me on Twitter @amit_merchant