How to Remove Scroll Bar in CSS

We are going to discuss how to remove the scroll bar in CSS in this article.

What is a Scroll Bar?

A scroll bar is an element that is placed at the corner of the web page. It is used to scroll the page upwards and downwards or left and right with the help of a mouse.

A scroll bar is when clicked and dragged then the content present on the web page is moved in the direction in which the scroll bar is dragged.

Nowadays, the scroll bar appears only when necessary and is hidden when not required.

We can hide the scroll bar from the web page with the help of the CSS properties.

Needs to Remove the Scroll Bar

The scroll bar makes the website look outdated.
It is not required in various website layouts.
It occupies extra space on the web page.

Benefits of Removing the Scroll Bar

We can remove the scroll bar and make the website look modern.
We can remove the scroll bar from layouts where it is not required.
We can save extra occupied space.

Ways to Remove the Scroll Bar

There are various ways in which we can remove the scroll bar from the web page.

1. Using the overflow-x property of CSS:

It is utilized to remove the horizontal scroll bar by setting the value as hidden.

Syntax:

The "overflow-x" is the CSS property with the "hidden" value.

Illustration of using the overflow-x CSS property:

We will build a registration page in this illustration. We are going to utilize "overflow-x: hidden" to remove the horizontal scroll bar.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Registration Page</title>
    <style>
        body {
            background-color: khaki;
            height: 4500px;
            width: 4500px;
            overflow-x: hidden;
        }
    </style>
</head>
<body>  
    <h3>Registration Form</h3> 
    <form>  
      
    <label>Firstname</label>         
    <input type="text" name="firstname" size="15"/> <br> <br>  
    <label>Middlename:</label>     
    <input type="text" name="middlename" size="15"/> <br> <br>  
    <label>Lastname:</label>         
    <input type="text" name="lastname" size="15"/> <br> <br>  
      
    <label>Course:</label>   
    <select>  
    <option value="Course">Course</option>  
    <option value="BA">BA</option>  
    <option value="MA">MA</option>  
    <option value="MBA">MBA</option>  
    <option value="BCA">BCA</option>  
    <option value="MCA">MCA</option> 
    <option value="B.Tech">B.Tech</option> 
    <option value="M.Tech">M.Tech</option>  
    </select>  
    <br>  
    <label for="Gender">Gender:</label> <br>  
    <input type="radio" name="male"/> Male <br>  
    <input type="radio" name="female"/> Female <br>  
    <input type="radio" name="other"/> Other   
    <br>  
    <label for="Mobile No">Mobile No.:</label>  
    <input type="text" name="country code"  value="+91" size="2"/>   
    <input type="text" name="mobile" size="10"/> <br> <br>  
    <label for="Home Address">Home Address:</label>  
    <br>  
    <textarea cols="80" rows="5" value="address">  
    </textarea>  
    <br> <br>  
    <label for="Email Address">Email Address:</label>  
    <input type="email" id="email" name="email"/> <br>    
    <br> <br>  
    <label for="Password">Password</label>  
    <input type="Password" id="pass" name="pass"> <br>   
    <br> <br>  
    <label for="Confirm password">Confirm password</label>  
    <input type="Password" id="confirmpass" name="confirmpass"> <br> <br>  
    <input type="button" value="Submit"/>  
    </form>  
    </body>  
    </html>

Output:

Here, we can witness output both without overflow-x and with overflow-x.

When overflow-x is not utilized, then the output is given below. Both vertical and horizontal scroll bars are visible:

When overflow-x is utilized then, the output is given below; only the vertical scroll bar is visible, and the horizontal scroll bar is removed:

2. Using the overflow-y property of CSS:

It is utilized to remove the vertical scroll bar by setting the value as hidden.

Syntax:

The "overflow-y" is the CSS property with the "hidden" value.

Illustration of using the overflow-y CSS property:

We will create a login form in this illustration. We are going to utilize "overflow-y: hidden" to remove the vertical scroll bar.

Code:

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Login Form</title>
<style>
    body {
        background: #f5d1fe;
        font-family: sans-serif;
        width: 2500px;
        height: 4500px;
        overflow-y: hidden;
    }
    .login {
        color: white;
        background: 
            -webkit-linear-gradient(to right, #267871, #136a8a);
        background: 
            linear-gradient(to right, #800000, #FF0000);
        margin: auto;
        border-radius: 8px;
        padding: 50px;
    }
    .login .form input[type=text].text {
        border: none;
        background: none;
        box-shadow: 0px 2px 0px 0px white;
        width: 100%;
        color: white;
        font-size: 1em;
        outline: none;
        }
    .login .form input[type=password].password {
        border: none;
        background: none;
        box-shadow: 0px 2px 0px 0px white;
        width: 100%;
        color: white;
        font-size: 1em;
        outline: none;
        margin-bottom: 20px;
        margin-top: 20px;
        }
    .login .form .password::placeholder {
        color: #D3D3D3;
        }
    .login .form .btn-login {
        background: none;
        text-decoration: none;
        color: white;
        box-shadow: 0px 0px 0px 2px white;
        border-radius: 3px;
        padding: 5px 2em;
        transition: 0.5s;
        }
    .login .btn-forgot {
        text-decoration: none;
        color: white;
        float: right;
        }
</style>

</head>
<body>
<section class='login' id='login'>
  <div class='head'>
  <h1 class='company'>Javatpoint</h1>
  </div>
  <p class='msg'>Welcome to Javatpoint</p>
  <div class='form'>
    <form>
  <input type="text" placeholder='Username' class='text' id='username' required> <br>
  <input type="password" placeholder='??????????' class='password'> <br>
  <a href="#" class='btn-login' id='do-login'>Login</a>
  <a href="#" class=' btn-forgot'>Forgot?</a>
    </form>
  </div>
</section>
</body>
</html>

Output:

Here, we can witness output both without overflow-y and with overflow-y.

When overflow-y is not utilized, then the output is given below. Both vertical and horizontal scroll bars are visible:

When overflow-y is utilized then, the output is given below; only the horizontal scroll bar is visible, and the vertical scroll bar is removed:

3. Using overflow property of CSS:

It is utilized to remove the horizontal scroll bar and vertical scroll bar by setting the value to hidden.

Syntax:

The "overflow" is the CSS property with the "hidden" value.

Illustration of using the overflow CSS property:

We will build a list in this illustration. We are going to utilize "overflow: hidden" to remove both the horizontal scroll bar and the vertical scroll bar.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>List of Coding Languages</title>
    <style>
        body {
            font-size: 24px;
            font-family: 'Times New Roman', Times, serif;
            background-color: lavender;
            color: blueviolet;
            width: 2500px;
            height: 2500px;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <h3>List of Coding Languages</h3>
    <ul type="circle">
        <li> HTML </li>
        <li> CSS </li>
        <li> JavaScript </li>
        <li> SQL </li>
        <li> PHP </li>
        <li> Java </li>
        <li> Python </li>
        <li> C </li>
        <li> C++ </li>
        <li> C# </li>
        <li> Perl </li>
        <li> Ruby </li>
        <li> NoSQL </li>
        <li> Swift </li>
        <li> Go </li>
        <li> R </li>
        <li> Kotlin </li>
    </ul>
</body>
</html>

Output:

Here we can witness output both without overflow and with overflow.

When overflow is not utilized, then the output is given below. Both vertical and horizontal scroll bars are visible:

When overflow is utilized, then the output is given below. Both vertical and horizontal scroll bars are removed:

Conclusion

We have comprehended how to remove the scroll bar in CSS. Some points to remember are given below:

We can hide the scroll bar to create an uncluttered design, provide extra space, and make the web page look trendy.
Following are the methods that we can utilize to hide the scroll bar from the website:
- overflow-x: This property is set to "hidden" to remove the horizontal scroll bar.
- overflow-y: This property is set to "hidden" to remove the vertical scroll bar.
- Overflow: This property is set to "hidden" to remove the horizontal & vertical scroll bar.