November 24, 2021

How to Disable Scrolling with Arrow Keys in Javascript

By Krishnaa JavaScript Questions 0 Comments

In this tutorial, you will learn how to disable scrolling with arrow keys in javascript. When the height and width of the content are higher than the height and width of the browser window, we see horizontal and vertical scrollbars.

A vertical scrollbar appears on the right side and a horizontal scrollbar appears at the bottom of the browser window. Generally, to vertically scroll a web page, we make use of the scroll wheel which is located at the center of the mouse. As an alternative, we can also use arrows keys for horizontal as well as vertical scrolling.

Each keypress on the keyboard triggers keyboard events. In the event handler function, the event object contains details about the keyboard event. The event object has a key property that can reveal which key has been pressed by the user.

To keep things simple, we are going to listen to the keydown event and in the event handler function, we will verify whether an arrow key is pressed or not. We are also going to use the preventDefault() method to prevent the default behavior.

In the following example, we have two button elements to disable or enable scrolling with arrow keys. Please have a look over the code example and the steps given below.

HTML & CSS

We have 4 elements in the HTML file (div, button, br, and h1). The div element is just a wrapper for the rest of the elements.
We have 2 button elements with an innerText of “Enable” and “Disable”.
The h1 element has “Arrow Key Scrolling” as innerText.
We have done some basic styling using CSS and added the link to our style.css stylesheet inside the head element.
We have also included our javascript file script.js with a script tag at the bottom.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
      
    <div>
        <h1>Arrow Key Scrolling</h1>
        <br><br>
        <button id="enable">Enable</button>
        <button id="disable">Disable</button>
    </div>
    <script src="script.js"></script>
</body>
</html>

body {
    height: 200vh
}

div {
    text-align: center;
}

button {
    padding: 10px 20px;
}

Javascript

We have selected both the button elements using the document.querySelector() method and stored them in the enableBtn and disableBtn variables.
We have a global variable disable that is set to false.
We have attached a keydown event listener to the document.
In the event handler function, we are using the switch statement and key property of the event object to execute a certain piece of code only for arrow keys.
We are using the if statement to verify whether disable is set to true or false. If true, we are calling the preventDefault() method to prevent the default behavior.
We have attached a click event listener to both button elements.
In the event handler function of enable button, we are setting disable to false.
In the event handler function of disable button, we are setting disable to true.

let enableBtn = document.querySelector("#enable");
let disableBtn = document.querySelector("#disable");

let disable = false;

document.addEventListener("keydown", (e) => {
  switch (e.key) {
    case "ArrowLeft":
    case "ArrowRight":
    case "ArrowUp":
    case "ArrowDown":
      if (disable) e.preventDefault();
      break;
  }
});

enableBtn.addEventListener("click", () => (disable = false));
disableBtn.addEventListener("click", () => (disable = true));

You May Also Like: