November 27, 2021

How to Disable Horizontal Scrollbar in Javascript

By Krishnaa JavaScript Questions 0 Comments

In this tutorial, you will learn how to disable horizontal scrollbar in javascript. The horizontal scrollbar generally appears when the width of the content exceeds the width of the browser window.

To scroll horizontally from right to left or left to right, we can make use of the mouse or use the right and left arrow keys. Disabling horizontal 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 horizontal scrollbar, we can make use of the overflowX property since the horizontal scrollbar belongs to X-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 horizontal 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 horizontal scrollbar at the bottom of the page.
The innerText for the h1 element is “Horizontal 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>Horizontal 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 {
    width: 200%;    
    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 overflowX property of the body element to scroll and as a result, the horizontal scrollbar will become visible if hidden.
In the event handler function of disable button, we are setting overflowX property of the body element to hidden and as a result, the horizontal scrollbar will become hidden if visible.

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


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

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

You May Also Like: