November 28, 2021

How to Disable Scrollbar in Javascript

By Krishnaa JavaScript Questions 0 Comments

In this tutorial, you will learn how to disable scrollbar in javascript. The vertical and horizontal scrollbars generally appear when the size of the content exceeds the size of the browser window.

To scroll vertically or horizontally, we can make use of the mouse or arrow keys. Disabling scrollbar may lead to poor user experience and that’s why we do not recommend that, but you may encounter a situation where you have to do so.

To disable the scrollbar, we can make use of the overflow property which represents scrollbars on both X-axis and Y-axis. The horizontal scrollbar belongs to X-axis. The vertical scrollbar belongs to Y-axis. This property is part of a style object which is used to set and get styles of an element in javascript.

In the following example, we have two button elements to enable or disable the scrollbar upon click. Please have a look over the code example and the steps given below.

HTML & CSS

We have 3 elements in the HTML file (div, h1, and button). The div element with a class of container is just a wrapper for the rest of the elements.
The div element with a class of empty does not have any children and is responsible for displaying vertical and horizontal scrollbars.
The innerText for the h1 element is “Scrollbars”.
We have 2 button elements with an innerText of “Enable” and “Disable”.
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 class="container">
        <h1>Scrollbars</h1>
        <button id="enable">Enable</button>
        <button id="disable">Disable</button>
        <div class="empty"></div>
    </div>

    <script src="script.js"></script>
</body>

</html>

.container {
    text-align: center;
}

.empty {
    height: 200vh;    
    width: 200vw;
    border: 1px solid black;
}

button {
    padding: 10px 20px;
    margin-bottom: 50px;
}

Javascript

We have selected both the button elements using document.querySelector() method and stored them in the btnEnable and btnDisable variables.
We have attached a click event listener to both the button elements.
In the event handler function of enable button, we are setting the overflow property of the body element to scroll and as a result, the horizontal and vertical scrollbars will become visible if hidden.
In the event handler function of disable button, we are setting the overflow property of the body element to hidden and as a result, the horizontal and vertical scrollbars will become hidden if visible.

let btnEnable = document.querySelector('#enable');
let btnDisable = document.querySelector('#disable');


btnEnable.addEventListener('click', () => {
  document.body.style.overflow = "scroll";
});

btnDisable.addEventListener('click', () => {
  document.body.style.overflow = "hidden";
});

You May Also Like: