Get "PHP 8 in a Nuthshell" (Now comes with PHP 8.3)
Amit Merchant

Amit Merchant

A blog on PHP, JavaScript, and more

Freeze scroll on arrow key up or down using JavaScript

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:


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'
    ) {

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.

Like this article? Consider leaving a


👋 Hi there! I'm Amit. I write articles about all things web development. You can become a sponsor on my blog to help me continue my writing journey and get your brand in front of thousands of eyes.