We are going to discuss how to remove the scroll bar in CSS in this article.
What is a Scroll Bar?
A scrollbar is a component positioned at the edge of a webpage, enabling users to navigate vertically or horizontally using a mouse to move the content up, down, left, or right.
When a user clicks and drags a scroll bar, the web page's content shifts in the direction corresponding to the scroll bar's movement.
Currently, the scrollbar is displayed only when it is needed and automatically hidden when not in use.
We have the option to conceal the scrollbar on a webpage by utilizing CSS attributes.
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.
- 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.
Benefits of Removing the Scroll Bar
Ways to Remove the Scroll Bar
There are multiple methods available to eliminate the scrollbar from a webpage.
1. Using the overflow-x property of CSS:
It is employed to eliminate the horizontal scroll bar by specifying the value as hidden.
Syntax:
overflow-x: hidden;
The CSS property "overflow-x" utilizes the value "hidden" to control horizontal overflow.
A demonstration of applying the overflow-x CSS attribute:
We are going to construct a registration page in this example. The CSS property "overflow-x: hidden" will be employed to eliminate the horizontal scrollbar.
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 observe the result both without overflow-x and with overflow-x.
When overflow-x is not used, the resulting display is as follows: Both vertical and horizontal scroll bars become visible.
When overflow-x is applied, the result is as follows: solely the vertical scrollbar is displayed while the horizontal scrollbar is hidden.
2. Using the overflow-y property of CSS:
It is employed to eliminate the vertical scroll bar by specifying the value as hidden.
Syntax:
overflow-y: hidden;
The CSS property "overflow-y" is set to "hidden" to control vertical overflow.
Illustration of applying the overflow-y CSS attribute:
We are going to design a login form in this example. To eliminate the vertical scroll bar, we will make use of "overflow-y: hidden".
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'>C# Tutorial</h1>
</div>
<p class='msg'>Welcome to C# Programming</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 observe the result both without the overflow-y property and with the overflow-y property applied.
When overflow-y is not employed, the resulting display is as follows: Both vertical and horizontal scroll bars are apparent.
When overflow-y is employed, the result is as follows: solely the horizontal scrollbar is displayed, while the vertical scrollbar is eliminated.
3. Using overflow property of CSS:
It is used to eliminate the horizontal scroll bar and vertical scroll bar by setting the value to hidden.
Syntax:
overflow: hidden;
The "overflow" CSS attribute contains the "hidden" setting.
Illustration of using the overflow CSS property:
We are going to create a list in this example. The CSS property "overflow: hidden" will be used to eliminate both the horizontal scrollbar and the vertical scrollbar.
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 observe the result both without overflowing and with overflow occurring.
When overflow is not employed, the resulting display is as follows. Both vertical and horizontal scroll bars are present:
When overflow is employed, the result is as follows. The vertical and horizontal scroll bars are eliminated:
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.
- 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.