November 27, 2021

How to Disable Vertical Scrollbar in Javascript

By Krishnaa JavaScript Questions 0 Comments

In this tutorial, you will learn how to disable vertical scrollbar in javascript. The vertical scrollbar generally appears when the height of the content exceeds the height of the browser window. Generally, the height is measured in pixels but if you want to use inch or centimeter then you can try this online height converter tool to convert centimeter to inch and vice versa.

To scroll vertically from top to bottom or bottom to top, we can make use of the mouse or use the up and down arrow keys. Disabling vertical 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 a vertical scrollbar, we can make use of the overflowY property since the horizontal 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 vertical 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 a vertical scrollbar on the right side of the page.
The innerText for the h1 element is “Vertical Scrollbar”.
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>Vertical Scrollbar</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;    
}

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 overflowY property of the body element to scroll and as a result, the vertical scrollbar will become visible if hidden.

In the event handler function of disable button, we are setting the overflowY property of the body element to hidden and as a result, the vertical scrollbar will become hidden if visible.

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


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

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

You May Also Like: